Looking for something?

How to use Font Awesome icons within CSS

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.


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 Get Started page on the Font Awesome website and make sure the Web Fonts with CSS tab is selected.

On this page you will see a piece of code. Make sure that the All option is selected above this code and then copy the code.

Web Fonts with CSS Font Awesome | HollyPryce.com

You need to paste this code in between the <head> </head> tags in your HTML file. 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.0.13/css/all.css');  
    }
    add_action( 'wp_enqueue_scripts', 'theme_files' );
?>

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.

Font Awesome icon search | HollyPryce.com

On the icon detail page you will see a little bit of code called unicode. It looks like this (you might need to scroll down the page slightly to see it)…

Unicode for Font Awesome heart icon | HollyPryce.com

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: "Font Awesome 5 Free";
}

Font Awesome heart icon | HollyPryce.com

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.

Font Awesome heart icon | HollyPryce.com

What if I’m using brand icons?

If you try inserting the unicode icon of a brand, such as Twitter, Facebook, Instagram, etc, you will see that the icon doesn’t show.

Font awesome icon not displaying | HollyPryce.com

This is because there is a different font family for the Font Awesome brand icons:

font-family: "Font Awesome 5 Brands";

So here’s what it looks like when we use the Twitter icon with the correct font family:

Font Awesome Twitter icon | HollyPryce.com

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 bMxBNM by Holly Pryce (@hollypryce) on CodePen.


Do you use Font Awesome? Or do you prefer a different icon font library? Let me know in the comments.

How to use Font Awesome icons within CSS | HollyPryce.com

Leave a comment

Comment

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