Learn how to Simply Change FontAwesome Coloration in HTML & WordPress?

Share on:

Altering the FontAwesome icon coloration isn’t a tough job, nevertheless it might confuse you need me? Last evening time whereas making modifications on my web page, I acquired caught at altering the icon’s coloration, even once I’ve already achieved it sooner than.

As quickly as I was achieved with my web page development, I decided to jot down a submit on learn how to alter the FontAwesome icon to help completely different web page builders like me. It’s not a troublesome job, nevertheless should you’re a newbie and don’t know CSS, it may very well be barely bit tough for you.

To range the icon coloration, it’s essential understand CSS class & id, however when not, don’t worry. Below on this text, I’ve outlined each little factor in a very refined method so that anyone can merely change the FontAwesome icon coloration. Be taught and observe the underneath instructions fastidiously.


This system gained’t be simply best for you you most likely have added icons in your web page using any plugin or internet web page builder like Elementor, Divi, or Visible Composer. You’re going to get the selection to range icon coloration and dimension throughout the internet web page builder or plugin administration panel.

Discover ways to Change the Coloration or Background Coloration of FontAwesome Icon?

It’ll take only a few seconds to range the color or the background coloration of the FontAwesome icon in your WordPress web page. You may wish to add a CSS code throughout the Further CSS area in your WordPress web page, and also you may be achieved. Let’s understand it by means of an occasion:

Also Read:  How to Optimize Focus Keyword in WordPress

Suppose you may be using a Fb icon (fa fa-facebook) wherever in your web page, and in addition it’s essential change its background coloration to black to match the theme of your web page. It might be achieved by together with the CSS property “background-color” in each the “fa” or “fa-facebook” CSS variable.

Right here’s what the final word code will seem to be:

.fa-facebook {
background-color: #000000

When you add this code to your web page’s CSS, it’s going to alter the background coloration of all the Fb icons in your web page, nevertheless what should you want to change the icon coloration as an alternative of the background coloration?


you’ll be able to do it within the an identical method by way of the usage of the CSS property “coloration” each in “.fa” or “.fa fa-facebook” Right here’s what the final word code will seem to be:

.fa-facebook {
background-color: #243c64;

That’s how one can change the icon coloration in WordPress, nevertheless most of you’ll marvel why we have now now used the class “.fa-facebook” as soon as we will use solely “.fa” because the class?

Also Read:  How to Create A Landing Page In WordPress?

It depends upon upon your desires. In case you employ the “background-color” or “coloration” price throughout the “fa-facebook” class, then solely the color of the Fb icon in your web page will change. Nonetheless, should you use the an identical price with the “fa” class, the color or background coloration of all the FontAwesome icons obtainable on the net web site will change, creating a problem for you.

Discover ways to Change the Coloration or Background Coloration of FontAwesome Icon When You Have Two Icons With the Related CSS Variable?

On this case, it’s good to make use of inline CSS the place you add the CSS code with icon code, not throughout the Further CSS of the web page. Using the CSS code means that you would be able to change every icon coloration in any other case. Adjust to the underneath instructions fastidiously to be achieved with it.

Using the inline CSS code is simple, you merely need in order so as to add trend=”coloration: #000000″ contained within the HTML part.

to this,

Discover ways to Add CSS Code in WordPress?

In case you choose the first method of adjusting the background coloration the place it’s good so as to add the CSS code to your web page, how will you add it in WordPress? Successfully, it’s good so as to add to the Further CSS on WordPress, proper right here is how you’ll be able to do it.

Also Read:  How to Change WordPress Login URL? (Quick Ways)

First, go to the WordPress web page admin panel after which to “Look > Customizer > Further CSS” and paste the color proper right here, as confirmed throughout the image underneath.

change color of fontawesome, change font awesome color, change fontawesome color

Paste CSS in “Further CSS” Discipline

As rapidly as you add CSS code to your WordPress web page, you’ll be aware the modifications, click on on on the Publish, and also you may be achieved.

Final Phrases

That’s how one can merely change the FontAwesome icon coloration with the help of further CSS in WordPress; it’s a easy job. No matter which icon from FontAwesome you may be using, you’ll be capable of change the icon’s coloration within the an identical method.

I hope this textual content about altering the FontAwesome icon coloration in WordPress is beneficial to you. Share this content material materials on social media and inform us throughout the comment half do you have to face any factors in altering the color.

Comfy Coding 🙂

Leave a Comment