How To Use Font Awesome Icons in HTML
Tags: webdev, tutorial, html, beginners
Published: 2022-12-06 09:20:23

**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](https://cdnjs.com/libraries/font-awesome) 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.
![font-awesome CDN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvxv8tp4nghtcve27ohz.png)

**Step 4**

Find your desired icons from fontawesome.com or by directly going [here](https://fontawesome.com/icons)

**Step 5**

Click on the icon to show its panel, which would look something like this:

![Font-awesome_icon_panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nr22z2ya2enzz9uvy87.png)
**Step 6**
Click on the code snippet to copy it and paste it on the desired location of your webpage.
![Icon added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75m6j19acwd5w19yh7bp.png)

---

### 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](https://fontawesome.com/icons)

**Step 5**

Click on the icon to show its panel, which would look something like this:

![Font-awesome_icon_panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nr22z2ya2enzz9uvy87.png)
**Step 6**
Click on the code snippet to copy it and paste it on the desired location of your webpage.
![Icon added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75m6j19acwd5w19yh7bp.png)


### 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.

![box issue 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7btrue9xt6vfkj0g3cpg.png)

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>`