# Using Font Awesome Icons in Website

> This tutorial will show the basic instruction on how to implement Font-Awesome 6 into the website.

- URL: https://codethepixel.com/using-font-awesome-icons-in-website
- Author: Asyraf Wahi Anuar (https://codethepixel.com/author/asyraf-wahi-anuar)
- Published: 2022-02-13
- Category: Misc
- Tags: Web, Font-Awesome, CDN
- Reading time: 2 min

Using icons in web design is very useful in modernizing the website design and it also can visually explain a concept. There are many free and open-source web icons available eg: Font Awesome, Friconix, Flaticon, Fontello, Fork Awesome and even front-end frameworks like Bootstrap also have their Bootstrap Icons. This tutorial will list the steps to implement Font-Awesome Icon on the website. Generally, the step is almost the same for any web icon API.

## The Icon Source: Font Awesome

Include the following Font Awesome 6 CDN inside *\<head\>* section. This CDN is provided by CDNJS.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
```

## Select and Apply Icon

Navigate to [Font Awesome Icon Library](https://fontawesome.com/search?m=free) and select any free icon that your want to apply.

```html
<i class="fa-solid fa-cannabis"></i>
```

Each icon has two classes and uses the \<i\> tag. The first, "fa-solid," defines the element as a solid icon style (for example, solid, regular, light, thin, duotone), while the second, "fa-cannabis," identifies the exact symbol to load. Simply find the proper CSS class to utilise different icons.

## Icon Size

To change the icon size, add fa-3x after the second class. It supports fa-1x until fa-10x

```html
<i class="fa-solid fa-cannabis fa-3x "></i>
```

The above instruction is the basic method to include and use icons in a website. There are many other customizations available for Font Awesome on their [official doc](https://fontawesome.com/docs). You also need to subscribe to the [Pro plan](https://fontawesome.com/plans) which offers more customization and icons. Enjoy your icons.