How to Color Font Awesome Icons and Brand Icons?

In this post, we are going to learn how to apply coloring for Font Awesome icons. There are around 4000 icons available on Font Awesome. Also, there are a lot of third party brand icons like Facebook, Twitter, Google, WordPress, etc. which we can use on websites for various purposes. By default, Font Awesome icons have no any particular color property as it is a type of font-family. Hence, it obeys the body class font color.

In this article, we will see how to apply Font Awesome icon colors for different scenarios.

Method 1

In this method, let us assume that our requirement is applying a similar color for all the icons throughout the website. So, we will add a bit of CSS code anywhere on the page.

.fa {color: green;}

Preview (Method 1)

Important Note

While adding the style class name, please check what class you are using. Font Awesome icons are classified into three categories. The default class name .fa has been now deprecated to .fas in version 5.0 which means solid style and .fab means brand style. So, you should carefully note the class name.

Method 2

In this method, let us consider we are going to apply different color for different icons. We can either add inline CSS code or write in a separate style tag as follows.

Adding inline CSS (Option 1)

<i class="fas fa-align-justify" style="color: #f5b041;"></i>
<i class="fas fa-edit" style="color: #16a085;"></i>
<i class="fas fa-layer-group" style="color: #3498db;"></i>
<i class="fab fa-android" style="color: #af7ac5;"></i>
<i class="fab fa-audible" style="color:#d35400;"></i>

Not Recommended

The above method uses inline style. Therefore, it is not recommended as it may slow down your page speed.

Adding styles in a separate style tag (Option 2)

.fa-align-justify {color: #f5b041;}
.fa-edit {color: #16a085;}
.fa-layer-group {color: #3498db;}
.fa-android {color: #af7ac5;}
.fa-audible {color:#d35400;} 

Preview (Method 2)

Method 3

This method uses Bootstrap’s default colors. If you are using Bootstrap framework, you just put the color name at the end of the class name as you see in the below example:

<i class="fas fa-align-justify text-primary"></i>
<i class="fas fa-edit text-secondary"></i>
<i class="fas fa-layer-group text-success"></i>
<i class="fab fa-android text-danger"></i>
<i class="fab fa-audible text-warning"></i>

Preview (Method 3)

Method 4

In this method, we take the scenario of handling brand icons like Facebook, Twitter, Google, etc. This method is as same as method 2. We have to search and find out the color code of each and every brand and add it to the CSS style. If you are using a couple of brand icons, you can follow the method 2. Otherwise, you can simply add the following CSS stylesheet link in your page head tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wikimint/wikimint@main/public/icons/fa-brand-colors.css"/>

Preview (Method 4)

Hope, the above post is helpful in handling the Font Awesome icons. If you have any doubts, ask you questions in the below comment form.