How to change the colour of Font Awesome icons?

[Donna Green]

Hi there, please can someone help me change the colour of the Font Awesome icons which I am using in widgets?

I’ve managed to write some CSS which alters the colour of the outer circle (see attached picture), by adding in this custom CSS:

.icon-circle.red i {
	border-color: #82150f;
	color:#666666;
}

However, I just can’t figure out how on earth to change the colour of the icon itself and would really appreciate advice.

The code I used in my widget is this:

[fa type="camera-retro" ]
read FAQs
Find out more - your questions answered

Many thanks for any help!
fontCircle.jpg

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi there,

Here is the solution of your issue:
1> Here we had added xclass arguments and provided a class named ” change-font-awesome-icons”

[fa type=”camera-retro” xclass=”change-font-awesome-icons” ]

read FAQs

Find out more – your questions answered

And finally i add this css on child theme style.css file

i.fa.change-font-awesome-icons {
color:red;
}

Please let us know how it will goes.

Note: Please use child theme style.css file to add custom css, so your changes will not lost on theme update.

Thanks

[Donna Green]

Thank you very much indeed – this works perfectly!

[Sushil Adhikari]

That’s awesome Donna Green 🙂

[Author]

Posts