Change color of icon Font Awesome

Question

I downloaded a theme that has font awesome icons on the navbar section. When I try to change the color of that icons it remains the same.

I tried

.fa-home {
    color:black;
}

But it doesn't work.

Anyway to see an example ? The reason could be your selector is been overriden by other complex selector — DaniP, Oct 10 '16 at 16:27
Check via web inspector if the color is applied on the `.fa-home` icon **OR** the `fa-home`'s `::before` element **OR** if its even getting overridden by other styles. — Nikhil Nanjappa, Oct 10 '16 at 16:27
@DaniP if Nick tried with inline CSS... There should be no complex selector that could override it. — Charles-Édouard Coste, Oct 10 '16 at 16:35
link:-http://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-icon-color — Razia sultana, Oct 10 '16 at 16:36
@Charles-EdouardCoste amm not true an `!important`anywhere could override it or if it's this case too https://jsfiddle.net/5yoqj0pz/4 — DaniP, Oct 10 '16 at 16:40

agustin · Accepted Answer · 2016-10-10T16:31:55.600

1

Try to apply the style to the :before element, where the icon is.

.navbarClass li [class^="fa-"]:before,
.navbarClass [class*=" fa-"]:before {
...
    color: #COLOR;
}

edited Oct 10 '16 at 16:31

answered Oct 10 '16 at 16:26

agustin

2,187
2
22
40

2

`!important` should not be required. – Paulie_D Oct 10 '16 at 16:27
This worked. thanks – Nick Arthur Oct 10 '16 at 16:36

score 0 · Answer 2 · answered Oct 10 '16 at 16:27

0

The problem is with theme, it may have defined the color somewhere in the css file. Search for that and follow the classes of icon so you can find where the color of icon is defined. Or put the css class at the top of the file and add an "!important". Like:

Color: black !important;

answered Oct 10 '16 at 16:27

Akmal Arzhang

357
4
14

4

Don't use !important. Just don't. – kind user Oct 10 '16 at 16:35

Change color of icon Font Awesome

2 Answers2