John Mwaniki /   21 Oct 2022

How to add Font Awesome icons in your web pages using CSS

• Table of Content
• Introduction
• CSS Pseudo-elements
• CSS 'content' property
• Understanding Unicodes
  • Using Unicodes with CSS
• Font Awesome Unicodes
• Examples of Font Awesome usage with Unicodes in CSS
• Conclusion

In an earlier article, I wrote about how to install Font Awesome on your website, and how to show its icons on your web pages.

In it, I explained that to show icons, you have to use HTML <i> or <span> elements. All you have to do is load Font Awesome on your pages, then add its classes to either of these elements.

There also exists another method which you can alternatively use CSS to add icons instead of the above-mentioned HTML elements.

To show Font Awesome icons on your pages with CSS, all you have to do is use ::before or ::after CSS pseudo-elements on an HTML element with the content property having Font Awesome icon Unicode as its value.

Don't worry or get confused... I will break down everything for you below in a more clear and easy-to-understand approach and with aid of multiple examples.

I will be a bit more descriptive in explaining some concepts such as the CSS pseudo-elements and the Unicode character encoding. So feel free to use the table of contents above to jump straight to the answer if you are already conversant with these concepts.

What are Pseudo-elements in CSS?

A pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected element(s).

Pseudo-elements provide flexibilities such as:

• Adding styling to the first letter or line of an element.
• Add some content before or after the content of an element.
• Change text selection highlight color, and much more.

Syntax

The syntax for using pseudo-elements is very similar to the normal CSS usage where we use selectors such as h1, p, a, #anything, etc, to select the element to which we want to add styling.

The only thing different this time is that we follow up the CSS selector with a double colon :: and the pseudo-element, ie. ::pseudo-element

selector::pseudo-element {
  /*Normal CSS styling*/
  font-size: 18px;
  font-family: serif;
  color: red;
}

We have a total of 6 CSS pseudo-elements as shown in the table below:

Note: In CSS3, pseudo-elements use double colon notation as opposed to pseudo-classes which use single-colon notation.
CSS2 and CSS1 used single-colon notation for both pseudo-classes and pseudo-elements.

CSS 'content' property

content is a CSS property used with ::before or ::after pseudo-elements to add content to an HTML element.

/*
Example 1
Adding a unicode character before unordered list items and giving that content some styling
*/
ul li::before {
  content: "\f101";
  padding-right: 10px;
  color: green;
}

/*
Example 2
Adding a unicode character after links and giving that content some styling
*/
a::after {
  content: "\f101";
  font-size: 16px;
  color: #444;
}

/*
Example 3
Adding a smiley gif image after H1 element(s)
*/
h1::before {
  content: url(smiley.gif);
}

/*
Example 4
Adding some text at the end of paragraph(s)
*/
p::after {
  content: " inserted text";
}

There are different ways of adding value to the content property depending on the kind of content you want to give it. The quotation method " " as used above in examples 1 and 2 is sufficient for us so we won't cover the rest here.

Understanding Unicodes

Unicode is a universal character encoding standard that defines the way individual characters are represented in text files, web pages, and other types of documents.

These characters include alphabets, numbers, mathematical notations, popular symbols, and characters from all languages. Each character is assigned a unique code that only identifies to it.

Unicode was designed to support characters from all languages around the world. It was developed in 1991 to overcome the limitations of ASCII encoding (which was designed to represent only basic English characters).

This encoding supports more than 1,000,000 characters.

There are different types of Unicode encodings, with UTF-8 being the standard and default character encoding for web and software programs. UTF-8 supports up to four bytes per character(using between one and four bytes to represent a character depending on the type of that character).

Characters in Unicode use unique numbers between U+0000 and U+10FFFF. The table below shows a list of a few examples of characters and their unicodes:

By convention, the Unicode hexadecimal number should be six characters long. Typically, to shorten it, leading zeros can be omitted as they're optional. For example, we used U+0975 for ॵ in the above table. It can still be written as U+000975 or U+975 without changing the character.

Visit unicode-table.com/en to view a wide list of all the Unicodes.

Using Unicodes with CSS

To add a character on a web page using its Unicode in CSS, simply remove the U+ part and use the remaining part as the value for the CSS content property by escaping it with a backslash \.

Remember that the content property is only used with the ::before and ::after CSS pseudo-elements so we have to attach these characters either before or after another HTML element.

Examples

/*
Example 1
Adding ॵ before paragraph(s)
*/
p::before {
  content: "\0975";
}

/*
Example 2
Adding Α after link(s)
*/
a::after {
  content: "\0391";
}

Font Awesome icons Unicodes

In a similar way to other types of characters, Font Awesome being an icon font has a unique unicode for each of its icons.

Examples

How to get Font Awesome Unicodes

Head to Font Awesome website, search for your preferred icon, and then click on it to open it.

In Font Awesome version 6, it opens as a modal within the same page and you can easily spot the unicode next to the small icon on the right side.

In version 5, it opens on a new page and you can easily spot the unicode next to the small icon on the left side.

On clicking on the unicode, it gets copied to the clipboard and you can paste it into your code.

Examples of Font Awesome usage with Unicodes in CSS

You add Font Awesome icons unicodes using CSS in a similar way to the other unicodes as covered above.

However, you will need to include the font-family property for it to work.

For Font Awesome version 4 and earlier, use FontAwesome as the property value.

For version 5, in addition to font-family, you will also be required to specify the font-weight. The table below summarizes the font-family values and font-weight values for the different styles of icons.

For version 6, use the font-family and font-weight values as in the table below:

<!DOCTYPE html>
<html>
<head>
<title>Adding Font Awesome icons via unicodes and CSS</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<style>
.container{
    width: 70%;
    display:block;
    margin: auto;
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #eee;
    box-shadow: 1px 2px 3px #ddd;
}
h1::after{
    content: "\f59c";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    padding-left: 10px;
}
.p1::after{
    content: "\f5fc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 10px;
}
ul{
    list-style: none;
}
ul li::before{
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: green;
    padding-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Adding FA icons with CSS</h1>
<p class="p1">I code using a </p>
<p>Below are programming languages</p>
<ul>
<li>Python</li>
<li>Java</li>
<li>PHP</li>
<li>C++</li>
</ul>
</div>
</body>
</html>

Output :

Conclusion

In this article, we have covered what unicodes are, what CSS pseudo-elements are, and how to add Font Awesome icons in web pages using CSS pseudo-elements and icons unicodes.

It's my hope you have enjoyed and learned. That's all for now.