Font Awesome Icons that are based on CSS and Less, are one of the options amongst the humongous range of icons that can be embedded in your website. Let’s explore how to add them in your web page.
How to add Font Awesome Icons?
There are two ways to add a free edition of Font Awesome Icons in your HTML web page that are:
1. Load the library
The first approach of adding a font awesome icon in your website is to add the font awesome library in the <head> section of your HTML file. For instance, in the following syntax the font awesome library of version 4.7.0 is being added in the <head> section.
Libraries of other font awesome versions are available online.
2. Get Kit Code
The second approach to add a font awesome icon in your web page is to make an account on Font Awesome official website to receive a code by the name “kit code”. This code can be used when inserting an font awesome in your web page. Once you get the kit code add the link in the src attribute of the <script> tag..
Upon receiving the kit code insert it in place of “kitcode” in the link and get going. For example.
Suppose, you want to insert a camera icon using the kit code approach. For doing so, consider the following code snippet:
Note: Font Awesome Icons are added in <i> or <span> elements.
The fa prefix is used to add font awesome icons along with the icon name. The newer versions of font awesome also use prefixes like fas (for solid mode) and far (for regular mode).
The font awesome camera icon successfully inserted.
The demonstration below shows the difference between the fas and far prefixes.
The font awesome bell icon (solid mode and regular mode) successfully embedded.
Now that we know how to insert a font awesome icon on the web page, let’s see how to resize font awesome icons.
Resizing Font Awesome Icons
There are a total of 13 classes that are used to alter the size of font awesome icons and these classes are; fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, and fa-10x.
This example demonstrates a few of the classes mentioned above.
The font awesome bell icon with various sizes is inserted in the web page.
More About Font Awesome Icons!
Here we have listed a few things that can be done to font awesome icons to enhance user experience.
1. Animate Font Awesome Icons
You can animate font awesome icons using the below-mentioned classes.
fa-spin: It is used to rotate an icon.
fa-pulse: It is also used to rotate an icon but with 8 steps.
This example demonstrates the above-mentioned classes.
The sync-alt and spinner icons are animated using fa-spin and fa-pulse classes.
2. Font Awesome Listed Icons
You can replace the ordinary bullets using the classes fa-ul and fa-li.
The classes mentioned above are demonstrated here.
The font awesome listed icons are embedded in the HTML web page.
3. Rotate and Flip Font Awesome Icons
You can rotate and flip font awesome icons by utilizing fa-rotate-* and fa-flip-* classes.
The example below shows how to rotate anf flip font awesome icons.
The car font awesome icon is being rotated and flipped from different angles.
4. Stacking Font Awesome Icons
You can stack font awesome icons using the following classes.
fa-stack: It is used for icon considered as parent in the stack.
fa-stack-1x: It is used for icon with the regular size in the stack.
fa-stack-2x: It is used for icon with the larger size in the stack
fa-inverse: It is used to change the color of an icon in the stack.
This example is a demonstration of stacked font awesome icons.
The font awesome ban icon stacked successfully on font awesome car icon.
5. Bordered and Pulled Font Awesome Icons
You can add borders and pull font awesome icons using classes; fa-border, fa-pull-right, and fa-pull-left classes.
Here the border and pulled icons classes are illustrated.
Icons are a way of demonstrating an action or an object visually. These are considered highly important in a web design in order to grab user attention. Besides this, icons enhance the appearance of a website, provide easy navigation, and increase user experience. Font Awesome Icons that are based on CSS and Less, are one of the options amongst the humongous range of icons that can be embedded in your website.
A quote was successfully pulled to the left with a border.
Font awesome icons can be embedded in your website by receiving a kit code from the official Font Awesome website. There are various classes available to resize font awesome icons, moreover, you can do multiple things with these icons, such as animate font awesome icons, use them instead of ordinary bullets in a list, rotate and flip these icons, etc. This and much more about font awesome icons are discussed in this write-up with the help of suitable examples.