Font Awesome is a popular icon service that enables us to add scalable vectors inform of icons to our websites such that you can add icons related to the function to add more visuals to the text or replace the text completely.
The icons are part of the user experience since they make the page more appealing when they are used. Font awesome keeps changing from time to time, therefore you will note that with the new font awesome version, some icons may not work and how to initialize them has changed or some other icons have been added which did not exist in the previous version.
So, what should one do is to keenly confirm the version he is using and the font awesome icon he wants to include.
In this article, we shall cover how to add font awesome icons to a website, what is required for font awesome icons to appear, examples of font-awesome in use on a website, how to search for a font awesome icon from the official font awesome website.
Font Awesome allows you to change the size, color, and drop shadow to fit your theme.
Currently as of October 2021, font awesome is already releasing version 6 but for this article, we shall use font awesome version 4 and more specifically the popular version 4.7
How to install font-awesome
There are various ways of installing font awesome to a website which includes
- Downloading the font awesome icons and placing them in your working folder then adding the link to the icons
- The next method which is common is adding the CDN link to the head of your website like this
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- Next, is a method that is not popular was introduced by font awesome which involves adding your email and a personalized JavaScript file is created for you and sent in your email which you include in the head section of the website
To start, you need to visit the font awesome version 4.7 link and get started https://fontawesome.com/v4.7/get-started/
Add your email and you will receive a code which you can include in the head section as shown
<script src="https://use.fontawesome.com/a9346ac964.js"></script>
By following any of the above methods, you will have added font awesome and it will be ready for use
How to use font awesome
Font awesome is used by inline elements which mostly are <i> and <span>
The default way to initialize font awesome is
<i class="fa fa-icontoinclude"></i>
fa is the class name
fa-icontoinclude is where you attach the icon name you want to display
for example, if you want to include the check or tick icon, you will add this code in the body section of your website
<i class="fa fa-check"></i>
When you run the above, it will display a tick or check icon
To show a cancel or delete icon
<i class="fa fa-times-circle-o"></i>
If you are not sure of the icon name you are using, you can visit the icons section in font awesome website https://fontawesome.com/v4.7/icons/ and the list of icons will be available there where you can even search for a name and if there are icons related to your search will appear
How to change the font awesome icon size
Font awesome provides a feature to change the size of the icon. The default size of the icon is 1x (1 times). You can change the icon size to either 2x, 3x, 4x or 5x
<i class="fa fa-check fa-2x"></i>
You can also use the css instead of font awesome style like below
<i class="fa fa-check" style="font-size:28px;"></i>
How to change the color of font awesome icon
To change the color of the font awesome icon, you can use the normal css styling feature and the color will update depending on the one you set or you can add the bootstrap primary colors before initializing the font awesome
<i class="fa fa-check" style="color:#000;"></i>
A full sample code of html with font awesome in use is as below
<!DOCTYPE html>
<html>
<head>
<title>Font awesome example</title>
<script src="https://use.fontawesome.com/a9346ac964.js"></script>
</head>
<body>
//default font awesome
<i class="fa fa-check"></i>
<i class="fa fa-times-circle-o"></i>
// font awesome with different size
<i class="fa fa-check fa-4x"></i>
<i class="fa fa-check" style="font-size:28px;"></i>
// font awesome with different color
<i class="fa fa-check" style="color:red;"></i>
</body>
</html>
That’s it for this article, hope you have learned how to work with font awesome icons.
