Getting Started with Font Awesome Icon  

Icon fonts are being considered by many these days and so there are numbers of developers that are taking advantage of the icons in terms of designs. There is also a fact that there are numbers of great things to be achieved once you are to use icon fonts. They as well offer both advantages and disadvantages. Icon fonts are simply fonts but they rather having numbers of letters they would contain glyphs and symbols. You could as well style them along with the CSS like you style a regular text making these icons as popular choice for many into the web. And Font Awesome Icon is among the most widely used by many.

Font Awesome Icons are collection of almost hundreds of icons. These icons could be used for free either for commercial or personal use. It was being originally designed for Bootstrap but you could use it into any other favorite frameworks. In order to include this Font Awesome Icon into the project the simplest way could be through CDN or Content Delivery Network. But once you are working off line there is a need to download the said icon pack.  

There is also a need for you to find as well as include the CSS file and also the generated font folder which contain different formats of font. Then, there is a need for you to add the said CSS file into your file into the HTML document. And finally, there is a need for you to verify the URL paths into your CSS file that corresponds to the suitable folder. In addition, for you to use Font Awesome Icon there is a need for you to place them in i or span element. Then, there is a need for you to assign them into two classes. The fa class along with second class should be the name of the certain icon that you would want to add into your project. There are as well additional predefined classes that would allow you in order to easily customize the said icons. 

And in order to understand Font Awesome Icon, there are certain different examples discussed below: 

First example would be about making a vertical navigation menu. There is a need to wrap the icons first inside the i element as well as double the size relative to the size of the container with the use of the predefined fa-2x class. Then style it with the use of CSS. 

For the second example, there is a need to create a social network panel that is simple. Again, wrap the icons in i element the next procedure would be the same as the first example.

And for the third example, the Font Awesome Icon would be used into a login form. The icons are to be used the same with how it was in the previous given examples. But, there is a need to apply another predefined fa-fx class into the icons setting them into a fixed width.