Font Awesome is also known as Awesome Font Icon or Font Awesome Icon is the iconic font and CSS (Cascading Style Sheets) toolkit that have pre-defined and pre-included vectors, icons, logos, signs and brands trademarks. Font Awesome is available for free as well as in paid-version too that comes with additional premium icons and many other things.
The best thing about the Font Awesome Icon is that it is easy to access and integrate with any webpages and anywhere on the website. In addition to this, the Font Awesome icon supports forms, fields, tables, navigation and a lot more creative stuffs that you can explore from the official website of Font Awesome.
In this article, we will learn to add your own custom icon to the awesome font without editing the Font Awesome library. While developing an HTML5 based Android application I needed some special icons which were missing in the Awesome Font icon for that I wrote a piece of source code to resolve the issue and now I am sharing with you. There are two ways to add Custom icon, logo or any other image, including vector to the Font Awesome and I’ve shared the both the methods.
Method: #1 — Adding through coding
The easiest and the quick method to add custom icon to the Font Awesome through coding is by stacking text and icons method already introduced by the developers of Font Awesome. Here are some examples that I’ve created using the same method introduced from its developer.
Example of SOS (Save our Souls) or Emergency icon in Font Awesome:
<span class="fa-stack fa-3x"> <strong class="fa-stack-1x">SOS</strong> </span>
Result: SOS
Here is another example for creating custom calendar icon using the same method as described above:
Method: #2 — Adding through 3rd-party sites
There are certain third-party websites that offers ease of conversion of any image into vector and are easily integratable in the same way as in Awesome Font icon.
These websites are :
If you have a new image or logo to convert, I will recommend you using fontastic.me where you can upload your own icons and images.
Alternative to this, you can use vectormagic.com to convert regular images into vectors which you can further use with the above mentioned website while convert these vectors into icons.
