Changing font awesome colors

Classic General
1

Hi,
I’m almost done with changing the theme of my teachers resources website over to the wonderful Flexer theme.

I’m at a loss as how to change the colors of the font awesome icons on the home page. I’ve looked at the same project file and I’m still none the wise. I’d like to see what the icons look like in purple.

If you could point me in the right direction I would be most grateful.

Thank you

Tim

2

Try this in Page Inspector > Meta Tags & HTML > CSS:

.fa { color: red; }

“red” is a placeholder for any color

3

Hiya apfelpuree,

Yes that does work, however it is for the whole page, so the font awesome icons in the menu bar change too.
I guessed this:

.fa-music {
color: red;
}

Which successfully turn the music icon red, but again the icon in th menu bar is red, which I do not want.

Thank you

Tim

4

You’ll have to target the specific area you want changed, sorta like this:

#stacks_in_page_1091 span .fa { color: #551A8B !important; }

If, in preview, you right-click, choose Inspect Element, that’ll make it easier to find.

5

All of your fa icons in the main part of the page are in JW responsive columns. You can thus simply target the icons in the columns and thus not affect the menu icons. This will do all of them in one go.

	color: red!important;
}```
6

You could save yourself some headaches and just use my Font Awesome stacks.

2 Likes