</> Code The Pixel

Using Font Awesome Icons in Website

Asyraf Wahi Anuar - February 13, 2022

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)

PHP: Estimate Reading Time
June, 20 2020
CakePHP 4 Print PDF Using CakePDF
May, 17 2020
CakePHP 4 Authentication Using Auth...
May, 14 2020
CakePHP 4 Sending Email
February, 01 2022
CakePHP 4 Export To CSV
May, 29 2020
CakePHP 4 jQuery Date Time Picker
October, 01 2018
CakePHP 4 Authentication Using...
May, 11 2020
Sharing Link
Click the icon to share