FontAwesome - how to change color

**GK User** Sat Mar 07, 2015 9:32 am

Hi!

Code: Select all: [class^="fa fa-"], [class*=" fa-"]

For this reason it is difficult to locally change the colors, eg. a <elements>.
For example. In the demo quark try to change the font color and icons in such elements as <div>, <ul> <li>
https://demo.gavick.com/joomla3/quark/features/typo

— How can I change the color of the icons locally, eg. In the list of street or div?
I need to create a new separate css styles???

**GK User** Sat Mar 07, 2015 6:45 pm

Please edit: /templates/gk_quark/css/override.css and add at its end:

Code: Select all: [class^="fa fa-"].test, [class*=" fa-"].test {color: red;}

The above example shows an icon which has a class named test - its color will become red.
Remember to enable "CSS override" in template settings - advanced section.

**GK User** Tue Mar 10, 2015 6:19 am

Today, I'll put the icon wherever it is black. Whether any such situation I have to assume a special new style?
— How to turn off the default color for the icon?

**GK User** Thu Mar 12, 2015 5:25 pm

There must be a default color. If you want some icons in different one - you need to add additional class.
Or maybe you would like to modify color of all fa icons (and set it to different one)?

**GK User** Thu Mar 12, 2015 6:05 pm

Hmmmm ... so I have to create a separate class for each of the icons ...
Is this how CSS works? I do not understand. I have a lot of feelings and perhaps even more to create lines of CSS code.

OK. Best Regards!

**GK User** Thu Mar 12, 2015 6:27 pm

Not for each of the icons - for each color you would like to have. Or you could use inline styling.

**GK User** Wed Mar 18, 2015 11:47 am

And how to change the color of the icons in a specific module?

**GK User** Thu Mar 19, 2015 6:45 am

Another example.

Code: Select all: <ul class="list1 fa-ul"> <li> My list text </li></ul>

After inserting the list style "fa-ul" list of all the text changes to the default color icons.
Now, to change the color of the icons list, I have create the new style:

Code: Select all: .list1 [class^="fa fa-"], .list1 [class*=" fa-"], [class^="fa fa-"].list1, [class*=" fa-"].list1 { color: #FFF;}

Is it really a good performance?

**GK User** Fri Mar 20, 2015 7:03 pm

As I have written - you can use inline styling. If you edit text in wysiwyg editor and change paragraph color you also add its styling inline, so this might be the way you are searching for.

**GK User** Sat Mar 21, 2015 10:00 am

Hi ten.mariusz,

I used this for GK ICONS, you can use the same for awesome font

Font with color and URL:

Code: Select all: <a href="https://www.youtube.com/"> </a>

Font plus URL:

Code: Select all:

Don't forget to use as text editor NONE and not tinymce!

I hope it is useful!

**GK User** Sun Mar 22, 2015 11:40 am

@xWiz this is not a valid html mockup.
You should use:

Code: Select all: <a href="https://www.youtube.com/"></a>

**GK User** Mon Mar 23, 2015 9:02 am

Awesome it worked. Thanks

I miss coloring and make the font a different size on this page:
https://demo.gavick.com/joomla3/quark_restaurant/theme-features/typo

This would be great in it!

Code: Select all:  fa-lg fa-2x fa-3x fa-4x fa-5x

Maybe adding to the typo pages? It would be great for beginners!

**GK User** Tue Mar 24, 2015 7:10 pm

You can increase size of each icon same as changing the color - simply by adding:

Code: Select all: font-size: 20px;

using inline styling:

Code: Select all: <a href="https://www.youtube.com/"></a>

**GK User** Tue Mar 24, 2015 7:13 pm

Cyberek thanks for the html code.

Coloring and sizing would be great in this page so everyone can search on it

:
https://demo.gavick.com/joomla3/quark_restaurant/theme-features/typo

**GK User** Tue Mar 24, 2015 7:14 pm

Ps of course you can use any modifier provided by Font Awesome:
http://fortawesome.github.io/Font-Awesome/examples/
Its all described in FA documentation.