Forum Discussion

Warren_Brill's avatar
Warren_Brill
Boss
8 years ago

Styling Font-Awesome Icons

We need to change the background colors on some of the font-awesome icons. Where in the SASS files can this be done? The vendor.scss file names the icons but nowhere in the other ones am I able to find the background colors for "triangletop", which I assume is the backdrop for the font-awesome icons. Has anyone done this?

  • SuzieH's avatar
    SuzieH
    8 years ago

    Hi Warren_Brill,

    To change the color of the triangle or the icon itself, it's simply Sass. I was able to change the color of the triangle from green to blue with this in _variables.scss.

     

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

     You'll need to check out the styles for every message grid where you want to do this, though. For example, this is the class I had to change for the grid used by the Topics I've Participated In component (component ID "messages-feed") in the View Profile page.

     

    .lia-message-view-display.lia-list-row-thread-solved:before {  
  border-top-color: #0000ff;
}

    We have the Font Awesome icons used with the Responsive skin here. And we have instructions for overriding the icons and creating new icons in the Responsive Developer Guide, but you found a hole that needs to be addressed with regard to documentation. I can work to improve on that.

  • RobertT's avatar
    RobertT
    Boss
    8 years ago

    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?

     

     

  • SuzieH's avatar
    SuzieH
    Khoros Alumni (Retired)
    8 years ago

    Hi Warren_Brill,

    To change the color of the triangle or the icon itself, it's simply Sass. I was able to change the color of the triangle from green to blue with this in _variables.scss.

     

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

     You'll need to check out the styles for every message grid where you want to do this, though. For example, this is the class I had to change for the grid used by the Topics I've Participated In component (component ID "messages-feed") in the View Profile page.

     

    .lia-message-view-display.lia-list-row-thread-solved:before {  
  border-top-color: #0000ff;
}

    We have the Font Awesome icons used with the Responsive skin here. And we have instructions for overriding the icons and creating new icons in the Responsive Developer Guide, but you found a hole that needs to be addressed with regard to documentation. I can work to improve on that.

    • Warren_Brill's avatar
      Warren_Brill
      Boss
      8 years ago

      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.

       

      • SuzieH's avatar
        SuzieH
        Khoros Alumni (Retired)
        8 years ago

        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. 

      • SuzieH's avatar
        SuzieH
        Khoros Alumni (Retired)
        8 years ago

        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.

    • Warren_Brill's avatar
      Warren_Brill
      Boss
      8 years ago

      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.

      • CarolineS's avatar
        CarolineS
        Boss
        6 years ago
        Warren_Brill wrote:

        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.

        Warren_Brill - what is this documentation of which you speak? I'm looking to add some new icons to those available in Lithium's font-awesome library.