Font Awesome is a popular icons library used by thousands of designers and developers. Most WordPress theme developers use Font Awesome to add different icons to the theme. Integration of Font Awesome is really easy. We just need to include the CSS file in the header and then add the HTML code of the icon to add it to a place in the Theme. Now if you are using a theme that is using Font Awesome icons, the theme should include the CSS file of Font Awesome. In the primary CSS file, the developer could have used the CSS to change the look and feel of the icon. Now if you want to change the FontAwesome icon Color, you can easily do this by adding CSS code to your theme. In this article, I will explain how you can change the Font Awesome icons code easily in WordPress.

I assume you want to change the color of the Instagram icon. The default icon code in the HRML should be something like this.

<i class="fa-brands fa-instagram"></i>

You will not have to alter this in any way.

Go to WordPress dashboard. Now go to Appearance and then Customize.

This section allows you to customize the theme of your WordPress website. From the left sidebar, select Additional CSS.

It will open a large Text box where you can enter the custom CSS to use on your WordPress blog.

How to change Font Awesome icon color

fa-instagram is the class of Instagram icons. To change the font color, you need to add CSS for this class. Copy this CSS code and paste into the Additional CSS text area. Save the CSS code.

.fa-instagram {
background-color: #8a3ab9
}

This sample code will change the Instagram icon color to the color value I added. You can change the color HEX value as per your need. You can also add a gradient color if you want to match the Instagram icon.

It is worth noting that the above CSS code will change the color of all the icons used on the website. If you just want to change the color of all the icons. If you just want to change the color of only one icon, you will have to include the inline CSS in that icon. For this, you will have to change the code in theme file.

Open the theme file where the icon’s HTML code is. The code will be something like the below.

<i class="fa-brands fa-instagram"></i>

You need to change this code to the code below.

<i class="fa-brands fa-instagram" style="background-color: #8a3ab9"></i>

Save the code and it will change the color of the font. You can change the background-color HEX value as per your interest.

Now you know how you can change the color of the Font Awesome icon. If you are comfortable with CSS, you will not have issues. You can easily do this by adding a CSS rule or inline CSS. If you don’t know how to code and are afraid of breaking your website, you can hire a developer who can do this for you. You can also ask me to help you in changing the color of the fa icon.