How to change hover color of FA icons

Styling (CSS)
1

I know this is probably a simple solution but for some reason I’m not seeing it.

I changed to icon color itself but how do I change it’s hover color?

Thanks

2

Should be something like this:

HTML

<i class="fab fa-font-awesome changes-color"></i>

CSS

.changes-color:hover { color: red; }
3

If just this CSS rule is added to the style.css file and then attached to the page - will this over-ride the similar rule in the bootstrap.css file or must this rule be commented out in bootstrap.css so its counterpart in the styles.css gets priority and will apply?

I ask because I tried this but the hover color does not change for me and I am weary of changing it in the bootstrap.css file since I don’t want the change to be site-wide.

4

Well… where to begin… C…ss
its the C, you…er See!

Cascading >>CASCADING … Style SHEETS.

from TOP
…to…V
…BOTTOM

or 1st to last, however you see it.

Think of it like that.
LAST ATTACHED SHEET WINS.

where you look at your lists of styles in your style sheets, attached to your page…
TOP TO BOTTOM…

each NEXT style sheet loaded, over rides the one before it and ITS RULES wins,

BUT!.., then come the rules. so …

WHERE EVER its RULES have the SAME EXACT specifity/level of accuracy of styling for an element. -this bit is important.

so the last STYLE SHEET attached wins, BUT!

see the *Magnitude bit above? … the LAST SHEETS rules win ONLY If they are the ALSO THE SAME OR MORE SPECIFIC… to the element you want to style than the sheets before it.

if ANY ONE OF THE LISTED sheets . (there could be loads) are MORE SPECIFIC to the the thing to be styled, then it wins! as it CANNOT be superseded if it is MORE ACCURATE a description of the precise element in its precise situation.
so, the MOST ACCURATE a description ANYWHERE IN ANY SHEET,
Trumps the Sheet order!

Now, someone can hopefully write a very nice little code example for you OR …google is your friend and play on Codepen etc.
its pretty mind bending till you get it.

and my code examples just sucked because I’m tired.
so, NEXT! to help :slight_smile:

5

Thanks so much. This is what happens when you spend the whole day working on these things and stop being able to see the simple solutions.

Much appreciated

1 Like
6

While working with frameworks, you will often have to overwrite the exact rule. Like schpengle mentioned before.

But you can try the !important statement.

CSS

.changes-color:hover { color: red !important; }
7

!important should be avoided as much as possible. Most of the time when you see this in code, it’s because the CSS was written incorrectly to begin with.

1 Like
8

That’s where my problem was. I didn’t realise that since I was using Chocka Blocks, the FA styling was being controlled there.

9

Thanks for the info. It’s great to learn about best practice.

10

Thanks to everyone who’s given info so far. It’s a great help while I’m learning.