Forum Discussion

Warren_Brill's avatar
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?

  • 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.

14 Replies

  • 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.

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    6 years ago

    CarolineS  See the documentation  for further information. Follow the first Fontawesome link for a detailed writeup on replacing an individual icon.

  • Warren_Brill's avatar
    Warren_Brill
    Boss
    6 years ago

    My task was to change the color of the "background" portion of the icon to match brand requirements.