How to install Font Awesome icons on your website?
Font Awesome is the most popular way to add font icons to your website. Font Awesome icons are created using scalable vectors, so you can use high-quality icons that work well on any screen size. Currently font awesome contains over 1500 free icons!
How to install font awesome on the website
In order to use the font awesome icons, you need to download a set of fonts and styles to your site. To do this, go to the official website – https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself and download the archive by clicking on the [Font Awesome Free for the Web button ].
Next, you need to unpack the archive and copy the contents of the / CSS and / webfonts folders to your website, for example, to the / CSS / awesome directory.
Now plug in the Awesome styles in the <head> section of your site:
<link rel = "stylesheet" href = "/ css / awesome / css / all.css" />
An alternative way to link with font awesome
You can not copy anything to your site, and download all the data from the CDN network. To do this, add the following code to the <head> section :
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.1/css/all.css">
The advantage of this solution will be a faster site speed, since the data will be loaded in parallel from different servers (the site is from your hosting, and the fonts are from the Awesome network), besides, the fonts can already be cached by the browser if you have once visited sites on which they are used.
The minus is the impossibility of using on offline sites (without access to the Internet) and dependence on the CDN network Awesome. Therefore, I usually use the first method.
How to use font awesome on the website
Once you have connected the fonts on your website, you can add Awesome icons to a web page in two ways:
- set the appropriate classes for the <i> and <span> elements ;
- add to the desired element using pseudo : before , : after and the corresponding property value content.
Example of using awesome fonts
For one of the sites I used the following code (for the <i> element, the font styles are awesome version 4.7.0):
<div class = "uslugi">
<div class = "usluga"> <i class = "fa fa-laptop fa-5x"> </ i> <br> Supply of computing equipment and software </ div>
<div class = "usluga"> <i class = "fa fa-video-camera fa-5x"> </ i> <br> Building a CCTV and video </ div>
<div class = "usluga"> <i class = "fa fa-address-card-o fa-5x"> </ i> <br> Development of access control systems </ div>
<div class = "usluga"> <i class = "fa fa-sitemap fa-5x"> </ i> <br> Design and installation of LAN / SCS and telephony </ div>
</ div>
In the browser, the result looks like this:
Where to find font awesome icons for the website
If you put letters and numbers on the keys of the keyboard and using them is not difficult, then here are the awesome fonts: how to find out if the icon code and its graphic image match. For example, which HTML code to display the Android icon?
To find out, visit the official website – https://fontawesome.com/icons?d=gallery&m=free
For example, the Android image corresponds to the following code:
<i class = "fab fa-android"> </ i>
On the screen, it looks like this:
Which version of awesome fonts is better to use on the site?
The Awesome font is constantly evolving, new icons and design options are added to it regularly. At the time of this writing, the 5th version of the font is relevant. But you can safely use the previous editions of 4.7.0 or even 3.2.1 on your site. To do this, visit https://fontawesome.com/v4.7.0/ and https://fontawesome.com/v3.2.1/ respectively.
Please note that when downloading a previous version of the font you will constantly be inclined to use the new version 🙂
PS
On my sites, I usually use the awesome font version 4.7.0. The reason is that it takes up less space. True, this version is a noticeably more modest set of icons, in particular, there is no Android icon mentioned above, which appeared only in version 5.0.
Comments (0)