ad place-1

Complete Tutorial How To Use Font Awesome Icons in HTML

In this tutorial, we are going to learn how to use font awesome icons in the html files. Font Awesome icon is great way to implement on our website It will make our website attractive and meaningful.


How To Use Font Awesome Icons in HTML

About Font Awesome?
Font Awesome is a platform that provides font and icons and it is based on CSS and LESS. It was released in 2012 by Dave Gandy for use in twitter Bootstrap later on it was integrated into the BootstrapCDN.

What is Font Awesome?
Font Awesome will provide us with the fonts and icons mean it's an icon, but it behaves like a text of which we can change the color, the size and almost anytime like a text in css, but it's not a text, it's an icon.

How to install Font Awesome?
There are two way to install font-awesome in our project
1. CDN Method
CDN full form is a Content Delivery Network
Font awesome will provide us a link we need to past in head tag that’s it. Our website is ready to integrate icons.
2. Local Method
We need to download the .zip file to our local computer, and then link all the files which there in this .zip file to the HTML head tag.

The best method to integrate CDN or Local Method?
Both are good but the best one is the CDN method to integrate on our project.

Is Font Awesome is free or Paid?
Font Awesome has both paid and free versions. It depends on you and your needs. The free version also enough to use.

I am showing three ways to use font awesome icons
1. Making a kit Code { This is the best method where you need to create an account then use icon in your project }
2. Direct using CDN method
3. Local Integrating


How to Use Font Awesome icons with making kit Code?

Step 01: 
Open Your Chrome Browse a search for “Font Awesome” and click on the first link https://fontawesome.com

How to Use Font Awesome icons with making kit Code- Search Font Awesome
Search Font Awesome

Step 02:
After that, Click on Start For Free you will redirect to other pages.


How to Use Font Awesome icons with making kit Code -Start For Free
Start For Free

Step 03:
Then you will be asked to create your first kit. Simply enter your email and click on the kit code. The Font Awesome team will send you a verification link to your email account. Confirm your email account and Just create your account.


How to Use Font Awesome icons with making kit Code - create your kit
Create your kit


Step 04:
After creating your account you will see a script link on your first-page copy that links and paste in your HTML Head tag.
How to Use Font Awesome icons with making kit Code - copy script
Copying Script Tag 


Step 05:
Search for your icon like I am searching for “Code” After that, you will see all the icons. If you are using the free version, you can not use the pro icon. So, select the icon that is not there with the protag. After That Click the icon


How to Use Font Awesome icons  - Searching for icon
Searching for icon


Step 06: 
After clicking on the icon you will visit the icon page. Let understand the icon page interface.
1. For Unicode Glyph 
2. Shortcode of Unicode 
3. Html link 
4. SVG Download
We are using html link(3) Copy html link and paste in your html file.


How to Use Font Awesome icons  - icon interface
Icon Page Interface


Step 07:
After integrating an icon in HTML open that file in a browser then you will find your icon.

How to Use Font Awesome icons - integrating icon
Integrating Icon


Step 08:
If you want to change color,font-size, etc.. you can do in css will class name of your font icon


How to Use Font Awesome icons  - Applying CSS to icon
Applying CSS to icon

Related Article: 
Most Useful top 10 Best Web Development Tools For Beginner

How to Use Font Awesome icons with CDN?

In this article, we are using the lastest v5.11.1 CDN

Step 01:
Open Your HTML File and copy below given CDN and past in Head Tag.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
font awesome icons
Past CDN In Head Tag

Open Your Chrome Browse a search for Font Awesome and click on the first link https://fontawesome.com.

Then to add icon repeat  Step 01 Step 05Step 06Step 07Step 08 of kit code.


How to Use Font Awesome icons On your local PC?

Step 01:
visit website https://fontawesome.com. (Same Process as in kit method)

Step 02:
You will visit a font awesome website then find for a download link and click on it. You will redirect to the download page.
You will find two option
Download font awesome for web and Desktop
Simply click on free for web, you will download .zip file then extract to your folder.


How to Use Font Awesome icons On your local PC-download cdn file
Downloading File


Step 03:
After extracting open that folder in that you will find css, js other more folders.
Click on the css folder and copy all.min file and past in your css project file
Then Click on the js folder and copy all.min file and past in your js project file
After that, pasting link all.min.css and all.min.js in your html head tag.


How to Use Font Awesome icons On your local PC - allmin file
Adding all.min file to our folder
Then to add icon repeat  Step 01,  Step 05Step 06, Step 07, Step 08 of kit code.

Yep, now you have learned how to use font awesome icons with kit code, CDN and local method.

Post a Comment

Post a Comment (0)

Previous Post Next Post