Font Awesome is an incredible free icon font library that you can use on your website.
I’ve already shared a post all about using Font Awesome to create social media icons using HTML and then using CSS to style these icons, but I wanted to write a post about using icons within CSS itself.
A few weeks ago I needed to use some Font Awesome icons within CSS for the first time, and I really struggled to find a straightforward tutorial to help me. The main problem was I couldn’t understand why some icons were working and displaying correctly while others weren’t, and instead a blank box was being displayed on the website.
I finally managed to work it out after reading about 10 articles, but it inspired me to write my own post to help out anyone else struggling to get to grips with Font Awesome in CSS.
In this post I’ll show you how to use Font Awesome icons in CSS.
This post was originally published on 17th May 2018 and was last updated on 6th November 2019.
1 | Install Font Awesome on your website
Firstly, if you haven’t already installed Font Awesome on your website, you will need to do this now.
Head over to the Start page on the Font Awesome website. If you haven’t used Font Awesome before you will be asked to signup to create your first kit. A kit is essentially your own custom code which you can use to install Font Awesome on your website Don’t worry, it’s complete free! All you need to do is enter your email address and then click Send Kit Code.
You will then be sent an email to the email address you entered. Open up this email and click the link to confirm your email address.
Next you’ll be asked to choose a password for your Font Awesome account. Once you’re done, click Set Password and Continue.
On the next screen you’ll be asked for some extra details about yourself such as your name, but you can skip this if you wish.
Eventually, you will get to your kit page and near the top of this page you will find your kit code which looks like this:
Copy this code by clicking Copy Kit Code and then paste this in between the <head> tags on your website. Once you have done this, you can start using Font Awesome on your website.
2 | Choose your icon
Now that we have installed Font Awesome on our website, let’s head back to the Font Awesome website to pick an icon we want to use. Click on Icons at the top of the page and use the search on the icons page to find an icon you would like to use. I’m going to use the heart icon, for example. 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 we are going to use in our CSS to display this icon, so it’s important to make a note of it, or leave the tab open for future reference.
3 | Set up your icon using CSS
To use the unicode we’ve found on the Font Awesome in CSS we need to use the CSS content property:
content: " ";
As you may or may not know, the CSS content property can only be used with the ::before and ::after pseudo-elements. ::before is used to add content before an element, and ::after is used to add content after an element.
For the purpose of this tutorial, I’m going to add an icon before a h1 header(<h1> </h1>), so my selector would look a little something like this:
h1::before {
}
If I wanted to add my icon after my heading the CSS would look like this:
h1::after {
}
Let’s start by adding out unicode for the heart icon as the value for the content property:
h1::before {
content: "\f004";
}
Notice that I have put a backslash ( \ ) before the unicode. If you don’t put this backslash in front of the unicode then the unicode will be displayed on the website rather than the icon.
Next, we need to add in the font family property, and the value we are going to use is “Font Awesome 5 Free” because we are using the free version of Font Awesome version 5.
h1::before {
content: "\f004";
font-family: "FontAwesome";
}
Some icons require you to declare a font weight or else they won’t show properly. If you do need to declare font weight I recommend using 600 as the value:
font-weight: 600;
Interestingly, if you set the font weight of the heart icon, it will change from the outlined heart to a filled in heart.
Here’s the code in action…
Just to make everything super clear, here is the code in action. As you can see I’ve added some spacing in between the text and the icon to make it clearer.
See the Pen
Font Awesome in CSS by Holly Pryce (@hollypryce)
on CodePen.
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?
