How to Easily Change Font Awesome Color in HTML & WordPress

Not sure how to change the font awesome color on your WordPress or HTML website? I know, sometimes we get confused and forget the basic coding of CSS, and it literally happens with me every time I start development.

And not just me, a lot of people get confused while building or making changes to their website, so here I’m with another exclusive post on changing FontAwesome icon colors in WordPress. This guide is easy to follow and it requires basic CSS knowledge to alter the color of icons.

So let’s get started…

What is Font Awesome Icon?

change font awesome color, change fontawesome icon color, change the font awesome color, how to change icon color

Font Awesome is an online library of thousands of icons that are used by millions of website owners, designers, and developers. The installation of Font Awesome icons on your website is pretty simple, you just need to paste a code on your site, and the icons will be visible on your site.

By using it, you can find icons of different categories like alert, alphabet, animals, automotive, communication, and many other types of icons. You can also customize icons by changing color, style, and also adding animations.

How to Change FontAwesome Color

Changing the color of icons is easy, and you can easily use a single line of code to change the color of font-awesome icons as well as icons from other most popular brands.

So, let’s assume we’re creating a social icon button and want to change the background color of our fa-facebook font-awesome icon; this can be easily achieved by adding a CSS property named “background-color” in either your “fa” or “fa-facebook” CSS variable. 

.fa-facebook {

  background-color: #243c64

}

But depends upon your needs, I recommend you to only use “background-color” value in “fa-facebook” properties. Adding the line of code, as shown above, will only change the background color of fa-facebook icon and not the other icons on your website – but if you add the code in the”fa” property, it will change the background color of every font awesome icon on your website.

Similarly, if you want to change the color of the icon, you’ve to use “color” property in either your “fa” or “fa-facebook” CSS variable. 

.fa-facebook {

  color: #243c64

}

It will change the color of the selected element on your website. 

But what if you’ve two icons on your website with the same CSS variable? 

If you have got the same icon used on your website and you just wanted to change the color code of only one icon, then you’ve to use inline CSS code for this. Otherwise, it will change the color of all the elements with the same CSS name.

Using the inline CSS is really easy, and you just have to add style="color: #243c64" inside the HTML element.

For example,

<i class="fa fa-facebook"><!-- icon --></i>

to this,

<i class="fa fa-facebook" style="color:#243c64;"><!-- icon --></i>

💡 Key Note:

  • If you’re using Page Builder plugins like Elementor, Divi, or Visual Composer, you can easily change the FontAwesome color right from your page builder dashboard,
  • And if you’re not using a page builder on your website, I highly recommend getting one to design your website more fluently.
Top

How to Add CSS Code in WordPress?

Adding the CSS code which we shared above is easy in WordPress. Once you decided the icons on which you want to change the color, then go to “Appearance > Customizer > Additional CSS” and paste your CSS code.

change font awesome color, change fontawesome icon color, change the font awesome color, how to change icon color
Add Additional CSS in WordPress

Once you have added your CSS code inside the box, click on the blue-colored “Publish” button showing in the top left corner. It will further change and apply the CSS you applied on your website.

How to Add CSS Code in Page Builders?

Are you using page builders to create landing pages on your site? If yes, don’t worry; I will show you how you can add CSS code in popular page builders like Divi and Elementor:

How to Add CSS Code to Change Font Awesome Color in Divi?

First, let’s see how you can add CSS to change Font Awesome color in the Divi theme. There are multiple ways to add custom CSS to the Divi theme. However, I recommend you use Divi’s Theme Options, as it is one of the easiest ways.

change font awesome color, change fontawesome icon color, change the font awesome color, how to change icon color
Divi Theme Options

Navigate to “Divi > Theme Options” from your WordPress dashboard. After that, you need to scroll down till the end of the page, as shown in the above image. Here, you will see a black box where you can enter your CSS code.

How to Add CSS Code to Change Font Awesome Color in Elementor?

In this section, I will discuss how you can add CSS code to the Elementor page builder. First, you must install and activate the Elementor page builder on your WordPress site.

change font awesome color, change fontawesome icon color, change the font awesome color, how to change icon color
Elementor Settings

After that, simply edit any post or post and click on the three bars (refer to the above image).

change font awesome color, change fontawesome icon color, change the font awesome color, how to change icon color
Elementor Custom CSS Options

Next, open “Site Settings” and select the “Custom CSS” option to access the code editor. Here, you can add your CSS code to change FontAwesome color.

Top

Wrapping Up!

Changing the color of fontawesome icon is easy, and it can be done within a few seconds. Here in this guide, I’ve shared a few ways to change the color and the background color of your fontawesome icons easily. The same settings can be done for any other icon files.

I hope you liked this article, and if you do, please share it with your friends, family, and followers. Also, if you’re getting any issues with changing the color of your icons, then you can share your query with us in the comment section below.

TheWPX is a blog where we cover topics related to Blogging, WordPress, SEO, and Affiliate Marketing.
All the information which is published on our website is collected through independent research and tests. The data is being verified through consultation with reliable sources.
Also, We constantly update the content on our website, keeping it fresh and relevant to our readers at all times.

Leave a Comment

Sunny Kumar

Sunny Kumar, Founder of TheWPX

Hola Amigos! I'm Sunny Kumar, founder of TheWPX. I started my journey in 2015, and since then, I've come a long way. And now, I'm helping new bloggers make their WordPress journey easy and effortless.