How to add Font Awesome icons on your website
Font Awesome is an open-source and freemium icon library and toolkit, used by millions of designers, developers, and content creators.
It was initially released in August 2012 and has over the years gained a lot of popularity. As of 2023, Font Awesome was used by over 200 million (approximately 30%) of websites that use third-party font scripts, placing it in the second position after Google Fonts.
It has a very wide array of icons for almost every idea you can think of. The latest Font Awesome version (v6) comprises 2,020 free and 26,107 premium icons, which fall under 68 categories, and 8 icon styles.
It is easy to install and is compatible with many different technologies such as pure HTML+CSS and frameworks such as Bootstrap, AngularJS, Vue.js, React, Sketch, Webpack, Ember.js, etc.
Installation of Font Awesome on your website
Below are 3 different ways to install Font Awesome on your web pages:
- Installation via Content Delivery Network (CDN)
- Installation via Font Awesome kit
- Manual Installation
1. Installation via Content Delivery Network (CDN)
A Content Delivery Network (also known as a content distribution network), is a geographically distributed network of proxy servers and their data centers. A CDN helps to provide high availability and performance by distributing the service spatially relative to end-users.
Installation of Font Awesome via CDN is the easiest and quickest method to do it.
There are several CDNs that you can use to load Font Awesome into your website project. In this article, we will cover the two below:
BootstrapCDN
BootstrapCDN is a public content delivery network (owned by jsDelivr project) that enables users to load CSS, JavaScript, and images remotely from its servers.
It is currently used(at the time of writing this article) by more than 7.9 million websites worldwide and serves more than 70 billion requests a month.
To load/install Font Awesome via BootstrapCDN on your website, visit https://www.bootstrapcdn.com/fontawesome/. Scroll down to the section titled "Font Awesome". Click on the icon on the right side of the Font Awesome CSS link and click on the HTML link from the dropdown that appears to copy it.
Then paste the copied code/link into the <head> section of your HTML web pages as in the example below:
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Installation with jsDelivr CDN</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
</head>
<body>
<!--
Your HTML code here with Font Awesome icons
-->
</body>
</html>
CDNJS
cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare.
It provides a simple, fast, and reliable way to load library files on your website.
To load Font Awesome on your website using cdnjs, visit https://cdnjs.com/libraries/font-awesome. Select your preferred version (I recommend the latest stable release). At the time of updating this article, the latest stable release is v6.4.0.
After selecting your preferred version, click on the "Copy Link Tag" icon of the first option.
You may choose to use a different one depending on your usage preference but personally, I recommend the first option as it is inclusive of all icon styles and it is simple to use.
Paste the copied code into the <head> section of your HTML web pages as in the example below:
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Installation with cdnjs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
<!--
Your HTML code here with Font Awesome icons
-->
</body>
</html>
2. Installation via Font Awesome kit
Using a CDN base Font Awesome kit option is another quick way to add Font Awesome to your website and start showing icons right away. To do this, you will be required to create your kit, which will be basically one line of code to place on your web pages. You will have to first create a Font Awesome account to do this.
Step 1: Visit https://fontawesome.com/start to get started. Enter your email address and click on the "Send Kit Embed Code" button.
You will be presented with a notification that an email has been sent to you.
Step 2: An email will be sent to you. Check for an email from Font Awesome and click on the confirmation button to proceed.
Step 3: You will be redirected to a page for setting the password for your Font Awesome account. Create a password and confirm it then hit the "Set Password & Continue" button.
You will then be asked to provide a few details about yourself including your first name, last name, when you first used Font Awesome, and your favorite icon. You can enter them and then click the button to proceed or you can click on the "Skip" link just below the button.
Your Font Awesome CDN kit is now ready and you can start using it in your website projects.
Step 4: Click on the "Copy JS Kit Embed Code" button to copy the kit then paste that code in the <head> section of your HTML pages in which you would want to display the Font Awesome icons.
Example: Adding Font Awesome kit on a web page
<!DOCTYPE html>
<html>
<head>
<title>Testing Font Awesome icons</title>
<script src="https://kit.fontawesome.com/69e9875501.js" crossorigin="anonymous"></script>
</head>
<body>
<!--
Your HTML code here with Font Awesome icons
-->
</body>
</html>
Now by just adding that one line of code to your web pages, you are all set and can start displaying icons on your web pages.
I will take you through a step-by-step process on how to add icons later after covering how to install Font Awesome manually.
Making changes to your Font Awesome kits
When you are logged in to Font Awesome, just open the kit you want to make changes to and open its "Settings" tab. Here you can make changes such as the kit name, switching between the free and pro versions, switching between web font and SVG, restricting the kit to certain domains, and changing the Font Awesome version. Click on the "Save Changes" buttons once you are done.
By default, the kit is set to the latest Font Awesome stable version.
The major advantages of using a CDN kit over manual installation are its quick and easy installation and ease of switching between different versions without having to change anything on your project.
Its downside is that you must be connected to the Internet to display icons. If you are working on an offline web project where you are not connected to the Internet, the icons won't be displayed on your web pages.
3. Manual Installation
The manual installation will require you to download Font Awesome files, then link to its CSS file on your web pages to import Font Awesome.
Step 1: Once you are on this https://fontawesome.com/start page, scroll down to the "Other Ways to Use". Choose any one of the options depending on the platform/framework your website is built on. In our case, we will click on the "Download" option to download the Font Awesome library into our project.
Step 2: You will be redirected to the downloads page. At the time of writing this article, version 6, release 6.4.0 is the latest. Click on the "Free For Web" button to download the latest stable release.
A zip Font Awesome file will be downloaded to the local storage of your device.
Step 3: Extract the zip file. The extracted folder will consist of the following folders.
Step 4: Copy the contents of the extracted folder into your project.
There are several ways of doing it. I suggest you just copy the "css" and "webfonts" folders. Inside the "css" folder, remove the other files and remain with the one named "all.min.css". Alternatively, you can retain the one named "all.css". I prefer the former as it is minified and lighter.
Make sure that the two copied folders reside in the same directory within your project.
Step 5: To import Font Awesome to your web pages, add a reference to the copied "/css/all.min.css" file in the <head> section of each page that you want to use Font Awesome on.
Example
<!DOCTYPE html>
<html>
<head>
<link href="/path-to-fontawesome/css/all.min.css" rel="stylesheet">
</head>
<body>
<!--
Your HTML code here with Font Awesome icons
-->
</body>
</html>
How to display Font Awesome icons on your website
Having installed Font Awesome into your web project using any of the above methods, let's now proceed to the usage and displaying of Font Awesome icons on your web pages.
Font Awesome icons can be placed just anywhere in the body of a web page, even alongside text and they will look natural.
Font Awesome is designed to be used with inline HTML elements which include either <i> or <span> tags.
To display an icon, just add either of the above two elements with classes as described below.
In Font Awesome 4 and earlier versions, we add two classes to the element where the first class is "fa" (initials of font awesome) and the second class is the name of the icon prefixed with a fa-, ie, "fa-icon-name".
Example
<i class="fa fa-user"></i>
In Font Awesome version 5, the "fa" class was deprecated and replaced with fa* where * is the icon style for the icon being displayed.
Example
<i class="fas fa-user"></i>
From the example above, the name of the icon is user. As you can see, it is prefixed with a fa-, and the first class is fas. The "s" in fas represent solid style.
The table below shows a list of all icon styles in Font Awesome 5 and their prefixes.
| Style | Class | Example |
|---|---|---|
| Solid | fas | <i class="fas fa-user"></i> |
| Regular | far | <i class="far fa-user"></i> |
| Light | fal | <i class="fal fa-user"></i> |
| Duotone | fad | <i class="fad fa-user"></i> |
| Brands | fab | <i class="fab fa-facebook"></i> |
In the Font Awesome version 6, four new icon styles (Thin, Sharp Solid, Sharp Regular, and Sharp Light) were introduced and all the version 5 classes above were deprecated.
Below is a table with the summary of all the icon types in version 6 and their respective classes.
| Style | Class(s) | Example |
|---|---|---|
| Solid | fa-solid | <i class="fa-solid fa-user"></i> |
| Sharp Solid | fa-sharp fa-solid | <i class="fa-sharp fa-solid fa-user"></i> |
| Regular | fa-regular | <i class="fa-regular fa-user"></i> |
| Sharp Regular | fa-sharp fa-regular | <i class="fa-sharp fa-regular fa-user"></i> |
| Light | fa-light | <i class="fa-light fa-user"></i> |
| Sharp Light | fa-sharp fa-light | <i class="fa-sharp fa-light fa-user"></i> |
| Thin | fa-thin | <i class="fa-thin fa-user"></i> |
| Duotone | fa-duotone | <i class="fa-duotone fa-user"></i> |
| Brands | fa-brands | <i class="fa-brands fa-facebook"></i> |
As you may have already noticed, the sharp icon styles have three classes (two specifying the icon style and one the icon name) while the other styles have two classes.
There is no need of memorizing these icons. Simply visit https://fontawesome.com whenever you want to add an icon, then navigate to the "Icons" page.
You will be taken to a page full of icons as shown below. You can easily find your desired icon by either using the search box or the categories on the left side of the page.
Once you start to type something in the search box, the icons will be filtered to show only those that match the phrase or are related to it.
On the left side, there are many different categorizations to help you easily locate your preferred icon.
The free icons appear in bold while the pro/premium ones look fading, so that way you can easily differentiate them.
Once you have found an icon of your choice, click on it to open more details. You will see its code (<i></i>) at the top. Click on that code to copy it to the clipboard then paste in your HTML code where you want to display the icon.
Example
<p>I use my <i class="fas fa-laptop-code"></i> to code.</p>
Output:
I use my to code.
Note: Make sure to use icons code that is supported in your Font Awesome version.
That's it!
It's my hope the tutorial was helpful to you, and that through it you have learned what Font Awesome is and how to install and use it in your website project.
