[katrin]

katrin

#10580

Greetings,

How do I adapt font awesome colors (stacks)? I added this to the customs CSS to change the icon color:

.colored-icon .text.has-icon .fa {

color: #3c8e25;

background: -webkit-linear-gradient(135deg, #87069e,  #1ca4be);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

This used to work in Firefox and IE, but not in chrome for some reason. Now it stopped working in all but IE browser.

Where/ how do I change the fa colors please? Any ideas are much appreciated! THANKS! =)

My site is http://www.holistichealthglobal.co.nz/

[katrin]

katrin

#46454

Anybody? Please…?!?

[katrin]

katrin

#46455

Happy New Year everyone! =) Hope you had/ continue to have a lovely break. It would be awesome if someone could respond to this thread…am I really the only one requiring this color change? Doubt it. =) Please help, many thanks!

[Kenneth John Odle]

Kenneth John Odle

#46456

It is difficult (but not impossible) to look closely at your site when you have disabled right-click.(Which does nothing to protect your content, btw.) This may be why no one has responded.

(Hint: Enable right-click.)

[katrin]

katrin

#46457

Hi Kenneth, thanks so much for responding. Read many of your helpful comments on Graphene over the years. =) Hint taken….will enable right click, and apologies for making helping harder! Not intended, just wasn’t aware, thanks. =)

[Kenneth John Odle]

Kenneth John Odle

#46458

That is working for me in Chrome (well, Chromium) and also Firefox on Ubuntu 16. I had to play around with it, but I believe the issue is that you are using the webkit vendor prefix. Something like this should work in all browsers:

.colored-icon .text.has-icon .fa {

color: #3c8e25;

background: -linear-gradient(135deg, #87069e,  #1ca4be);

background-clip: text;

text-fill-color: transparent;

background: -webkit-linear-gradient(135deg, #87069e,  #1ca4be);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background: -moz-linear-gradient(135deg, #87069e,  #1ca4be);

-moz-background-clip: text;

-moz-text-fill-color: transparent;

}

You can probably do away with the background-clip, as I don’t believe these elements have a border. (See https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip for more info.)

Also, the text-fill-color is non-standard and will not work on all browsers. (See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color for more info on that.) You should experiment to see if you can do without it.

Quote:

Not intended, just wasn’t aware, thanks. =)

Keep in mind that a lot of people use right-click to navigate through websites, so disabling it makes it hard for some people to move around in them.

Hope this helps. Any other questions, just let us know.

[katrin]

katrin

#46459

Hi Kenneth,

Thank you so much for your time and response, I really appreciate it. Tried your suggestion, and it did not work in Chrome or Opera (windows). Also played with omitting lines, and that had some effect, but on the whole not entirely what I wanted.

For whatever reason, I retried something I tested months ago (when it didn’t work), and now it kind of did….for anyone else needing this change (and using FJ stacks): adjust the color within the stack edit, under “design” and “font color”; I had to delete the existing stacks and create new ones, and then it worked…that simply didn’t occur to me before, where I only adjusted what was already there and the changes didn’t take. Note that this also changes the font color of your text box content; if you don’t mind that, then this is a possible solution. If you need to change fa icon color without impacting other elements….above path might be worth pursuing (CSS changes). For now, this works for me. Hope it stays that way… =)

I hope this somewhat helps others with the same issue….

Thanks again for responding Kenneth – a happy & healthy 2017 to you (and the team). Keep up the great work! K. =)