How to Use Font Awesome in Website
Font Awesome is a CSS file that contains icons of websites like phone icons, email icons, WhatsApp icons, etc. There are a number of similar CSS files like Google fonts, flat icons, etc, but Font Awesome is mostly used in websites. In previous days we use png images for icons but it slows down the performance of the website so Font Awesome is also helpful to give the best performance as compare to png images.
In this blog we will learn how to use Font Awesome Icon on the website, Let’s see the following steps:
Step1: Copy the following given link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step2: Paste this link in your <head> tag.
Step3: Search the icon on google which you want to use or you can find the icon on this given link:
https://fontawesome.com/v4.7/icons/
Step4: Copy icon HTML Code and paste in your html code wherever you want to use.
Complete Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-address-book" aria-hidden="true"></i>
</body>
</html>
Note: Now the current version of Font Awesome is 5 and Font Awesome6 is the upcoming version, in this blog we have given the example of Font Awesome4, if you want to use the FontAwesome5 then there is no problem you can use the same steps which I told only change the CSS CDN link of font-awesome.
Categories: web designing css
