SVG in an unordered list

Support
#1

I see that WebFonts can now be replaced with SVG. I alwaus used a bit of CSS to pull WebFonts into un-ordered lists. Like so:

ul.capital li::before {
content: “\f00c”;
font-family: FontAwesome;
padding: 0 8px 0 0;
color:#c3d96a;
font-size:14px;
font-weight:900;
margin-left: -1.6em;
}

I have scoured the web and cant seem to find a way to do this with SVG icons. Am I missing something simple? I typically use FontAwesome in my CSS, as that is auto-loaded when using WebFonts. SVG has me a little baffled.

#2

Hello @uxmediahouse,

Thanks for writing to us.

It is not possible to replace the SVG icon with the CSS, to replace the icon with the CSS code you need to use the WebFont. I have tested the code on my end it seems that there is a syntax error I would suggest you please update the CSS code to the given CSS.

ul.capital li::before {
content: '\f00c';
font-family: FontAwesome;
padding: 0 8px 0 0;
color:#c3d96a;
font-size:14px;
font-weight:900;
margin-left: -1.6em;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

#3

Ah, bummer. would love to switch to SVG. But i use this CSS trick a lot on sites.

Thanks for the syntax fix!

#4

You are most welcome @uxmediahouse

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.