How to Easily Change FontAwesome Color in HTML & WordPress: CSS Tweaks

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 had 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 might 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 instructions below carefully.

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” to either the “fa” or “fa-facebook” CSS class.

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 used the class “.fa-facebook” when we could use just “.fa” as the class?

It depends on your needs. If you use the “background-color” or “color” value in the “fa-facebook” class, only the color of the Facebook icon on your website will change. However, if 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 the icon code, not in the Additional CSS of the website. Using the CSS code allows you to change each icon color differently. Follow the instructions below carefully to complete this task.

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 method of changing the background color, wherein you need to add the CSS code to your website, how would you add it in WordPress? Well, you need to add it to the Additional CSS on WordPress. Here’s how you can do it:

First, go to the WordPress website admin panel and then to “Appearance > Customizer > Additional CSS” and paste the color code there, as shown in the image below.

As soon as you add CSS code to your WordPress website, you will see the changes. Click on “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’s 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 🙂