Using Font Awesome Icons in Website

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.

<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 and select any free icon that your want to apply.

<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

<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. You also need to subscribe to the Pro plan which offers more customization and icons. Enjoy your icons.