Styling Font-Awesome Icons

Hi Warren, 

Fontawesome icons are essentially text elements, you can target them the same way you do other text elements by setting the color property in SASS/CSS.

Some elements require you to use the :before pseudo selector.

Do you have an example of the icons you want to change?

Thanks to both of you for the quick replies. I'd looked at what felt like dozens of SASS files but sometimes that inquiry can be akin to a needle in a haystack, so this is very useful.

It's tough, I know. I've ask Product Management and Engineering for a way to have full search through the Sass files, or at least a way to download them and search through them in an editor like Atom or Sublime Text. We have an enhancement requested, but other things have taken priority. 

Again, many thanks. I'm going to mark an Accepted Solution, though I probably won't have time to implement today.

Interestingly enough, we do not have a SASS file called "_variables.scss". We do have:

_variables-base.scss.var

_variables-overrides.scss.var

_variables-peak.scss.var

but none of them has a reference to ".lia-list-row-[anything] .triangletop:[anything] ..." This tells me that such a reference needs to be added, most likely to the overrides file.

I've looked in bootstrap and peak ... same story.

Perhaps what I'm attempting to do is so mundane that it didn't appear necessary to document it. I'm not trying to do any of the tasks documented, such as adding a FA icon, replacing with an image, etc.

All I'm looking to do is change the background color of existing FA icons to conform with our branding. Most often, once a single example is successfully re-styled, the rest fall into place relatively quickly.

Hi Warren_Brill,

My apologies. I should have asked you what version of Lithium Responsive you are working with, specifically what version of Responsive Base and Responsive Peak. You can find this in Studio under the Features tab. You're doing at all the right things -- we're just looking at two different versions of the skin. Styles were in flux up through release 16.8. If you can let me know what version what version of Responsive Base and Responsive Peak you are running, I can help track down which classes you want to work with.

1.3 on both.

Hello Warren,

The styles for this specific feature are in the following places:

responsive_peak/sass/peak/components/_tables.scss - This applies the styles to the table row.

.lia-list-row-thread-solved {
  @include thread-status-icon($li-triangletop-check-bg, $fa-var-check);
}

responsive_peak/sass/_variables-peak.scss.var - This maps a common pallet color to the background color for the accepted solutions "check".

$li-triangletop-check-bg:       $li-palette-green;

You could also override the $li-palette-green var if you want to update all the places this green is used.

$li-palette-green:          #70b989;

Finally, if you do not want to override any variables you could just add the following CSS:

.lia-list-row-thread-solved .triangletop:before {
  border-top-color: #00B388;
}

The way I discovered the CSS to override in this last example was by looking here:

The tricky part with locating this is that it uses the :before psuedo class selector to apply a border-top-color for this styling.