SOLVED: Problem adding custom icon on list using ::before pseudo custom css

im trying to not to use the icons libraries for performance, so i decided to add a checkmark with before pseudo element.
the problem is that i add the code in css and save it and reload the builder page and removes the “” backslash character from code and displays only the numbers and also happens on the preview page and main page, and one more thing is not displaying is that same color as the text. this was done using the icon list element in bricks builder.

AFTER SAVE AND REFRESH PAGE***

can some one help me out what im doing wrong here

Hi Luis,
Thanks for your report!

There seems to be a difference between styling on the ID and class - on the ID it works well. I’ve added it to our bug tracker.

Best regards,
timmse

1 Like

can you show me how to get it to work if you don’t mind, as temp fix if you know any way to get it done

Sure,
deselect (or remove) the class (.cityNameList) so you’re styling on the ID and then add the following custom CSS to the icon list element (Style » CSS):

root li::before {
  content: "\2714";
}

Best regards,
timmse

I added the css at element level css and it works great… BUT


IS NOT RENDERING PROPER ON THE MAIN PAGE HERE IS AN SCREEN SHOT OF IT.
for some reason is not working on the frontend only on the builder side of it

Hey Luis,
Did you remove the class and style on the ID instead? As mentioned before, that works for me.

Alternatively, you can keep the class and add a second backslash - this won’t work in the builder, but it will work in the frontend. However, once the problem is fixed, this will result in the icon not being displayed. Therefore the first variant is preferable.

Best regards,
timmse

Hey Luis,

We’ve provided a fix for this in Bricks 1.5 RC. Meanwhile, RC2 is now available for manual download from your account page.

If the fix isn’t working as expected, please let me know here.

Thank you!
Luis

i will test it, thank you i keep you updated.