Changing the FontAwesome icon color is not a challenging task, but it may confuse you like me? Last night while making changes on my website, I got stuck at changing the icon’s color, even when I have already done it before.
Once I was done with my website development, I decided to write a post on how to change the FontAwesome icon to help other website developers like me. It’s not a tricky task, but if you are a newbie and don’t know CSS, it may be a little bit tricky for you.
To change the icon color, you should understand CSS class & id, but if not, don’t worry. Below in this article, I have explained everything in a very sophisticated way so that anyone can easily change the FontAwesome icon color. Read and follow the below instructions carefully.
Keynote:
This method will not work for you if you have added icons on your website using any plugin or page builder like Elementor, Divi, or Visual Composer. You will get the option to change icon color and size in the page builder or plugin control panel.
How to Change the Color or Background Color of FontAwesome Icon?
It will take a few seconds to change the color or the background color of the FontAwesome icon on your WordPress website. You need to add a CSS code in the Additional CSS area on your WordPress website, and you are done. Let’s understand it through an example:
Suppose you are using a Facebook icon (fa fa-facebook) anywhere on your website, and you want to change its background color to black to match the theme of your website. It can be done by adding the CSS property “background-color” in either the “fa” or “fa-facebook” CSS variable.
Here is what the final code will look like:
.fa-facebook {
background-color: #000000
}
When you add this code to your website’s CSS, it will change the background color of all the Facebook icons on your website, but what if you want to change the icon color instead of the background color?
Well, you can do it in the same way by using the CSS property “color” either in “.fa” or “.fa fa-facebook” Here is what the final code will look like:
.fa-facebook {
background-color: #243c64;
}
That’s how you can change the icon color in WordPress, but most of you will wonder why we have used the class “.fa-facebook” when we can use only “.fa” as the class?
It depends upon your needs. If you use the “background-color” or “color” value in the “fa-facebook” class, then only the color of the Facebook icon on your website will change. Still, when you use the same value with the “fa” class, the color or background color of all the FontAwesome icons available on the website will change, creating an issue for you.
How to Change the Color or Background Color of FontAwesome Icon When You Have Two Icons With the Same CSS Variable?
In this case, you need to use inline CSS where you add the CSS code with icon code, not in the Additional CSS of the website. Using the CSS code allows you to change every icon color differently. Follow the below instructions carefully to be done with it.
Using the inline CSS code is easy, you just need to add style=”color: #000000″ inside the HTML element.
<i class="fa fa-facebook"><!-- icon --></i>
to this,
<i class="fa fa-facebook" style="color:#000000;"><!-- icon --></i>
How to Add CSS Code in WordPress?
If you choose the first way of changing the background color where you need to add the CSS code to your website, how will you add it in WordPress? Well, you need to add to the Additional CSS on WordPress, here is how you can do it.
First, go to the WordPress website admin panel and then to “Appearance > Customizer > Additional CSS” and paste the color here, as shown in the image below.
As soon as you add CSS code to your WordPress website, you will see the changes, click on the Publish, and you are done.
Final Words
That’s how you can easily change the FontAwesome icon color with the help of additional CSS in WordPress; it is a straightforward task. No matter which icon from FontAwesome you are using, you can change the icon’s color in the same way.
I hope this article about changing the FontAwesome icon color in WordPress is helpful to you. Share this content on social media and let us know in the comment section if you face any issues in changing the color.
Happy Coding 🙂