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…

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 wanted 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 added your CSS code inside the box, click on the blue-colored “Publish” button showing on the top left corner. It will further change and apply the CSS you applied on your website.

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. A blog where I share my experience which I have gathered from my last 5 year journey in blogging with all the new bloggers struggling to make their first income.

Copy link
Powered by Social Snap