Icons are among the most eye-catching and simplest displays on our devices. If you need to call someone, you do not have to open and run technical data for making calls in your smartphone. The same thing is true if you want to send a text message, open a digital file folder, play virtual games, etc. Just imagine trying to figure out if your phone is already connected to the internet or not without the icon for Wi-Fi. It would be very difficult as compared to simply looking at the Wi-Fi icon and see if the bars indicate internet access. This is the main reason why font awesome icons have become an integral part of the digital world. If you are involved or interested about the field of icon creation, you probably want to know how you can make your font awesome icon awesome. So how do you do it really? Well, this post can help you a lot. Read on to know more about it.
The Challenge
Fundamentally, adding the <i> tag into the HTML code is the most basic way of including a particular icon into a website. Here is an example;
<i class=fa fa-book></i>
This i-tag icon maker example will result to an image of a book as an icon. In the first glance it seems that it is a great way of creating awesome icons, however, there is a downside of it. When you use <i> tags for all icons you want to create, you will end up having dozens of it in the HTML side of your website. To tell you, these <i> tags may not really have any structural purpose whatsoever in your document. This only means that you are not making your font awesome icons truly awesome.
The Solutions
Here are a few effective and easy to follow solutions you should know:
#1 Obtain the latest modified versions of Font Awesome files
If you will be the one to provide your own Font Awesome file copies, you may think that youll easily solve the problem. This is what most people consider especially that such option allows them to utilize a copy that they like. However, the method has some primary issues, which include:
Users do not want to keep a custom file copy of the Font Awesome data
Its library is more than the size most users want
Most users want to take advantage of the public CDN
Because of these issues, the best option is for you to obtain the latest modified version of font awesome files for icon-creation and customization. It is designed to address all the concerns mentioned above.
#2 Include the groupings to your target element
The next highly advised option I to include the groupings/classes to your target element instead of using <i> tag. Here is an example:
<a class=fa fa-book href=#>This is a link</a>
These solutions will really work and make your font awesome icon really awesome.