Help updating discussion style icons

Hi CarolineS 

I wanted to follow up with a solution (hopefully) from AdamA. (Thank you Adam!)

I was able to get this working on my test community. Please let me know if this works on your stage site.

Because you are customizing an image use for styling (as opposed as an image associated more with content) you probably want to add a custom style that overrides the contest icon with a "background-image" override.  

• You will add a new style definition called .lia-fa.lia-img-icon-contest-board:before in _style.scss.
• You'll also need to convert your SVG icon into a data URL. You'll need to ask your UX team for the SVG markup. This site can help you translate that markup into a data URL.
• In the definition:
  • set content to empty
  • set background-image to url("<your_encoded_data_URL>")
  • You can use other attributes like width and height if you need to change the size or other styling elements

Here is an example:

.lia-fa.lia-img-icon-contest-board:before {
content: ' ';
background-image: url("<your_data_URL>");
height: 25px;
width: 25px;
display: block;
margin: 12px auto;
}

 

 

The alternative "content" override method I mentioned earlier would look something like the following. Again, you'll add this CSS  to _style.scss.

.lia-fa.lia-img-icon-contest-board:before {
content: url("<your_data_URL>");
margin: 4px 0 0 4px;
display: block;
}

With this method, set the content attribute as the encoded SVG data URL. Note that if you want a different size, your UX designer needs to set a width on the SVG element (prior to encoding).