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.
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.
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 …
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:
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.
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:
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:
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:
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.
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.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
