Font Awesome Icon: CSS Classes Analysis and Ultimate Solutio

Making a website highly efficient and eye-catching should be one of the most important considerations for website creators and owners. Needless to say, it helps a lot especially in making the page navigation tasks of online readers become a lot easier. This is the reason why font awesome icons have become extremely essential for website builders. If you have been using it or have just decided to try using it, you should know that one of the drawbacks that font awesome icons have is that it pollute the HTML portion of your page with the styling markup. Having said this, learning about the analysing CSS classes and the best solution for it will certainly be advantageous on your part. Now, if you are ready for it, here it is. 

Every icon incorporates 2 CSS classes: (1) the fa class that is shared and (2) the icon-specific class, for example fa-book. If you will just establish the icon-specific class, you will have an output with Unicode characters that are not so meaningful. Here is an example:

              <a class=fa-book href=#>This is a link</a>

With this coding, you will end up with colored font but not with a meaningful icon you are trying to target. If you want to make an easy modification, you will just have to include the shared fa class into your HTML code. Also, web developer tools available over the internet can also help you easily make necessary modifications without making any problems to your original tag. 

Analyse the outputs on every modification you make. Is it getting any better or you are getting farther to what you are trying to achieve? If it is the latter, you may use CSS analysis tools available online. This will let you know if you are making things right, especially if you are not really skilful in this kind of work. 

Ultimate Solution 

Once you are done with the code-analysis you can work on, the best solution is to come up with one and one more class in a style sheet for customization. This will troubleshoot the problem.

Here is what you should do: 

Name your class icon

Attach a ::before attribute 

Add a little margin on the right side of the sheet. This will prevent the icon from sticking to your original tag.

Using these simple tricks, you will be able to make your font awesome icon extremely efficient. Here are some advantages you will obtain with after applying those tricks: 

Continuous utilization of your original CDN library for Font Awesome icon

Adding empty and meaningless <i> tags is no longer necessary 

There will be no interference with other CSS in your target elements 

You need not to use unicode approach (meaning you need not to custom change the CSS for every individual icon) 

You can count on the reliability of the code 

Arriving at an efficient font awesome icon is not that difficult if you just know how to do it right. Let this suggestions help you with that.