Code The Pixel

Using Font Awesome Icons in Website

Asyraf Wahi Anuar - February 13, 2022
Published in Misc 1117 Views Email This Article
Estimated reading time: 1 minute, 26 seconds

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.

 


Cite this article (APA 6th Edition)