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…
Table of Contents
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.
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.
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.
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.
