Looking for something?

How to use Font Awesome icons as bullet points in lists

I’m sure by now you are aware that I love Font Awesome!

Font Awesome is a popular icon library with over a thousand free icons that you can use on your website. I’ve used these throughout my own website to create my social media links, my social sharing buttons and even the icons for my blog post categories.

I’m always looking for ways to enhance the design of my website using icons, and today I wanted to show you how you can use Font Awesome icons to jazz up your lists.

In this post, I am going to show you how you can use Font Awesome icons as bullet points in lists on your website.


1 | Install Font Awesome on your website

First things first, you need to install Font Awesome on your website, if you haven’t done so already.

Head over to the Start a New Project page on the Font Awesome website where you will see a piece of code. Make sure that the Free and All options are selected above this code and then copy it.

Font Awesome stylesheet code

You need to paste this code in between the <head> </head> tags in your HTML file. Then when you’ve done this, save and upload your file, and that’s it! The Font Awesome library is now installed on your website.

If you are using WordPress…

If you are using WordPress, you should enqueue this stylesheet correctly via the functions.php folder. Your code might look a little something like this…

<?php
    function theme_files(){
        wp_enqueue_style('font-awesome', '//use.fontawesome.com/releases/v5.6.3/css/all.css');  
    }
    add_action( 'wp_enqueue_scripts', 'theme_files' );
?>

For more information about enqueuing stylesheets and scripts correctly on your WordPress website, check out this tutorial.

2 | Choose your icon

Now that you have installed Font Awesome on our website, let’s head back to the Font Awesome website to pick the icon you want to use. Click on Icons at the top of the page and use the search on the icons page to find a specific icon. I’m going to use the star icon, for example. Now click on the icon you wish to use.

Star icons on the Font Awesome website

On the icon detail page you will see a little bit of code called unicode. It’s normally at the top of the page and looks like this …

Unicode for the Font Awesome star icon

This is the code you need to use in your CSS to create our bullet point, so it’s important to make a note of it or leave the tab open for future reference.

3 | Remove the existing bullet point styling

By default, an unordered list on your website will look a little something like this:

Standard list on a website

In order to change the bullet points used on our unordered lists, you need to remove the existing bullet points. To do this, you need to use the list-style-type CSS property.

The list-style-type property is used to change the bullet point style and by default, this is set to be a disc. You will want to completely remove the bullet point that is automatically used when you create a list so set the value to none. So your CSS rule for an unordered list would look something like this:

ul {
    list-style-type: none;
}

This will target all the unordered lists on your website. If you only want to change the styling of a certain list on your website, you will need to assign a class to that list and then update the CSS accordingly.

List without bullet points on a website

4 | Set up your new bullet point styling

Now you have removed the existing bullets points, it’s time to add in your Font Awesome icon. To do this you need to to use the ::before CSS selector.

If you aren’t familiar with the ::before selector, it is used to add content before a particular element. Similarly, there is an an ::after CSS selector for adding content after a particular element, but as we want to add content before a list item, you need to use ::before. The CSS rule will look a little something like this:

ul li::before {
 
}

Within this CSS rule, you need to to use the content CSS property that determines the content that you are going to place before each of the list items. In this case, you need to insert the Unicode of the Font Awesome icon you have chosen to use. You must place your Unicode between double quotation marks and with a backslash ( \ ) before the Unicode, like so:

ul li::before {
    content: "\f005";
}

If you were to save your CSS now and view your list on the front-end of your website you would see something that looks like this:

List on a website with Font Awesome icons not working

As you can see, your icons aren’t pulling through correctly. This is because you need to specify that we want to use Font Awesome as our font. So head back into your CSS and add in the font-family property with the value set to be Font Awesome 5 Free.

ul li::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
}

Or if you are using branded icons (such as Twitter, Facebook, Pinterest, etc.) set the font-family value to be Font Awesome 5 Brands.

Now take a look at your list and you should see that your icons are pulling through as expected:

List on a website with Font Awesome icons as bullet points

If you find that your icons are too close to your list items, add in a little bit of padding to the right of your icon like so:

ul li::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    padding: 0 10px 0 0;
}

You see, this looks a lot better:

List on a website with Font Awesome icons as bullet points

For more information about using Font Awesome icons in CSS, check out this tutorial I wrote.

An alternative way of using Font Awesome icons as bullet points…

There is another way of using Font Awesome icons as bullet points for your lists. You still need to complete steps 1, 2 and 3 of this tutorial to install Font Awesome and remove your existing bullet point styling. However, instead of setting up your new bullet points using CSS, you can add the icons directly into the HTML itself.

To do this, instead of selecting the Unicode of the icon on the Font Awesome website, you need to copy the HTML code instead.

HTML code for the Font Awesome star icon

Then you need to go into your HTML and place this HTML directly after the opening <li> tag for each list item, like so:

<ul>
    <li><i class="far fa-star"></i> List item 1</li>
    <li><i class="far fa-star"></i> List item 2</li>
    <li><i class="far fa-star"></i> List item 3</li>
    <li><i class="far fa-star"></i> List item 4</li>
    <li><i class="far fa-star"></i> List item 5</li>
</ul>

The downside to using this method is that it means more work for you because you have to manually add in this HTML for each item in your list. This also means it’s more work for you should you want to change these icons in the future.


Get access to my freebies library!

My exclusive freebies library contains cheat sheets, checklists and other resources to help you to create and run your dream website.

To access my freebies library and join my community, just fill in the form below. Find out more information about my community right here.


How to use Font Awesome icons as bullet points in lists | HollyPryce.com

Leave a comment

Comment

* = Required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.