If you would ask various developers about their favorite font icon, most probably, they are going to answer you with fontAwesome. Yes, they will! If you are going to go back on the old-fashioned technique, they aim on creating icons. Basically, this is done by cropping images to become an icon and at the same time, give the same quality of image whatever the size is. But then, right now , everyone have fontAwesome, a more convenient and sophisticated wayof doing the same job.
With fontAwesome, you can obtain scalable graphic vectors of icons which you can customized right away particularly in its size, shadow, drop, color and many more.Therefore, if you never ever used this one, then you are missing half of your life as a developer. It is amazingly flexible, useful as well as easy to use with through mark-up. Normally, you can use this through utilizing the <i> element which goes along with one icon-specific class. Take a look on the following:
<i class="icon-github"></i>
Most of the time, this is an effective way. However, if you don’t feel that you have to inject this one, you don’t need to worry. There are still other ways for you. What you need to do is to make use of : before, a pseudo-element of an element you’d like to use. After that, you must set the content and font-family:
div.github:before {
content: "\f05b";
font-family: Fontawesome;
It is important on the role of the font awesome with <i> tag. That is why it is just common that you are doing this for customization purposes.
What are the benefits of using fontawesome?
Generally, you can get two benefits here. The first one is on performance. Because most of the icons are all included in one file, it only means that you will only need a HTTP request so it can load. It will provide you remarkable load performance when you are utilizing huge amount of icons. You could also include necessary CSS so it could render particular icons with any other .css files you want to load you know best for your theme. Secondly, the fact that it is a type of font could also provide you good benefits.You could enjoy everything regarding with the style you ordinarily get with the regular text. With that, you could say that you change easily the size and the color of the icon along with a little bit of CSS. Additionally, this will also render sharpness as long as your device will allow one. Knowing this, you don’t need to be worried about making retina ready graphics.
Final Thoughts
FontAwesome is one of the most useful tools you could have when you are building your own website. Never ignore this one. Each detail you put on your site has its own contribution on why you can call it
as a good website. Make sure you are choosing and using the right fontawesome for them. Always remember, it takes one fontawesome to make your website effective and attractive.