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?
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.
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 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.
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.
After that, simply edit any post or post and click on the three bars (refer to the above image).
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.
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.
