Icons have become a crucial element in Web Development and adding the appropriate icons to your Website could make or break the design.
Font Awesome is an icon library that you can implement into your website straight from their website.
How to use Font Awesome Icons?
1. CDN Method
Step 1
Locate the link to font-awesome CDN by going to this site.
Step 2
Press on </> button next to the link that ends with all.min.css
Which will copy something like this onto your clipboard
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-XXXXX+y+XXXXX/XXXX==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Step 3
Go to your .html file where you're designing your webpage and paste the copied code within the <head> tag.
Step 4
Find your desired icons from fontawesome.com or by directly going here
Step 5
Click on the icon to show its panel, which would look something like this:
Step 6
Click on the code snippet to copy it and paste it on the desired location of your webpage.
2. Downloading the Icon Pack
Step 1
Go to the download section of fontawesome.com and click on icon pack of your choice. I'll be using "Free for Web" for this tutorial.
Step 2
A .zip file will be downloaded, which you have to unzip and place it in the same folder as your website.
Step 3
Use the link tag in the <head> tag and locate the css file containing the icon data.
The directory would look something like this:
/fontawesome-free-x.x.x-web/css/all.css
Step 4
Find your desired icons from fontawesome.com or by directly going here
Step 5
Click on the icon to show its panel, which would look something like this:
Step 6
Click on the code snippet to copy it and paste it on the desired location of your webpage.
Troubleshooting
In case you notice square boxes in the places where you put the icons, there are two probable reasons (as far as I know).
One is due to the font family set onto that element or its parent element.
Since font-awesome icons are treated as fonts, declaring a different font family would override it and the font-awesome icon cannot be found.
Another reason could be the class declaration issue. For example, in
<i class="fa-solid fa-circle-info"></i>
no class of fa-solid may be found in the CDN.
In that case, you can remove the -solid to use the default version of the icon.
The code snippet would look something like:
<i class="fa fa-circle-info"></i>
Top comments (0)