Substitute bullet points (stars) with Font Awesome Icons

Hey guys,

is it possible to change the bullet points into other icons, preferably fa icons within the Sydney FP: List widget? Or even better: Is it possible to define classes/attributes in custom css so that I can tell certain widgets to display the bullet points either as stars, checks, points or whatever. Do you understand what I mean?

Thanks for your legendary help in advance - again :slight_smile:

Cheers
Charly

Hello Charly,

Please provide a link to your website and describe what exactly you want to achieve, and I’ll try to help you.

Kind Regards, Roman.

Hello Roman,

sorry, I can’t provide a link, I’m working offline. I hope this question could be answered in general - without a specific link.

I want to use the widget “Sydney FP: List”. The standard “bullet points” in this widgets are stars. How to change the “list-style-type” is described here: But I want to change those stars into font-awesome icons, so that I can use a green check-icon for example.

And if it’s possible, I would like to change those bulletpoints for every single List-Widget I use. So on page1 I would like to use those check-icons and on page2 I would like to have “fa-angle-right” and so on. Is this maybe possible by defining attributes/classes, that I can enter inside the widget, on the right side (where it says “Widget Styles: Attribute, Layout, Design”)?

I hope, I’ve expressed myself clearly now.

Kind Regards
Charly

Hello Charly,

You can try to use the following CSS code for check icon.

You can add CSS code in Customize → Additional CSS section.

.page-id-8 .widget_list .roll-list li::before {
  content: "\f00c";
}

Just replace the page ID with appropriate one. Also you can replace content value to use other icon. If you replace page ID and content value, you’ll have other icon on other page.

Kind Regards, Roman.

Roman, sorry for the late answer and thanks for your help! Is it possible to define css classes, for example something like this:

.my-custom-class .roll-list li {
  content: "\f00c";
}    

and enter this class in the specific row/widget (see attached picture)?

Hello Charly, sorry for a delay as well, I had a little road trip :slight_smile:

Yes, it’s possible. Please specify class/icon and I’ll try to help you with code.

Kind Regards, Roman.