How to Add a List of Features with Corresponding Font Awesome Icons

When you need to have a stack of features displayed on your site, it can get a bit cumbersome to come up with the right graphics or images for each feature. Depending on the number of features you have, you can use images or icons to accompany each feature. If you have a couple of features, you can use photo backgrounds or custom illustrations to accompany each feature and add a touch of creativity.

However, if you need to display a long list of features, images may take up a lot of space, slow down the page and, make it harder to come up with the right image for each feature. In this case, using icons is a great idea.

With FontAwesome, you can find many cool icons to display your features with. FontAwesome, especially the latest version, offers thousands of icons to choose from. Even the free version offers more than 1,500 icons to choose from. In this tutorial, we'll show you how to create a list of features with corresponding FontAwesome icons.

Getting Started

This tutorial uses Bootstrap and FontAwesome so the first thing is adding them to our project. 

Note: We're using FontAwesome 5, you can get your own FontAwesome icon kit here. 

Put the Bootstrap and FontAwesome links inside the head tags in your HTML:

HTML

The HTML code below is built with the Bootstrap grid and elements. There's a div element with a classname of .container which is the main container for the section and two rows inside it: one row for the heading title "Additional Features" and the other for the features list. We have 9 features so we used a 3-column layout. Each list item has a classname of .col-md-4 which means they each take up 1/3 of the space to put 3 items horizontally. Depending on the items you have, you may have to change this column value to fit more or fewer items on a single row.

Each div element contains an i tag, which is the icon tag that FontAwesome uses. To add your own custom icons, head to the FontAwesome website and then search for the icon you'd like: https://fontawesome.com/icons. Make sure you filter the search results to free if you're using the free version and not the pro version.

Below is a sample icon code. Copy paste the entire i tag to put the icon in your HTML:

Here is the complete HTML code for our feature list:

CSS

Since we use Bootstrap and used the built-in classes that come with Bootstrap, we hardly had to add any custom in the CSS file. The important thing to note here is the font-family property. FontAwesome should be added as the font-family font so that the icons are displayed, otherwise, they will just show up as blank squares.

And here it is. Check out the JSFiddle below to see how it looks before committing to its use: