In a website layout, there will often be ICONs that make the website more beautiful and friendly, and in addition, those ICON also have the effect of navigating users.

Previously to create ICONs, we had to cut them out from the PSD file and use CSS to assign the background or use the img tag to put that ICON into it. But now we have another solution that is to use Symboy Font (font style symbols). Currently, there are many best but most powerful Font Font libraries, Font Awesome because it is simple and easy to use.

Before learning how to use Font Awesome, we will learn its concept. But for hot, I give an example to show you:

Example:

Font Awesome

Font Awesome is a library of commonly used font symbols in websites. Symbol font here is the icons that we often use in website layout.

Font Awesome is built into many different font file formats such as otf, eot, ttf, woff, svg, … So you can easily put it into use and most of the current computer operating systems run OK.

In addition to the usual icons, you can create animated icons by combining with CSS3 as in the example I demoed above.

Font Awesome works mostly in modern modern browsers. However, with older versions IE7, it is no longer supported because IE7 is considered dead.

If you use Bootstrap to build CSS for your website, it will be easy to see the need for Font Awesome because they work together quite well and create pretty cool products.

  1. The strength of Font Awesome

 
If we use images, the load speed of the website will be slower because we have to load a rather heavy image. But Font Awesome only needs to load a CSS file, a Font file and only load once, so the speed will be greatly improved.

An image cannot change their color or size. For size alone, we can use CSS to set the width and height, but if you do so, the image quality will be affected. But with Font Awesome, you can easily change the size and color of the icon with the usual CSS properties of the font such as color, font-size or any other CSS attribute for the font.

Font Awesome is flexible to help programmers not take too much time to retrieve icons from PSD file.

And there are many more strengths but I am for you to explore for yourself.