[Resolved] Alternative Bullet Styles

[MMS]

Hi, I’ve changed my bullet points to arrows using the following CSS code.

.entry-content ul li:before {
content: “\279C”;
position: absolute;
left: -1.5em;
color: #689931;
}

But on the following page, I have a list of Pros / Cons. https://makemesustainable.com/what-are-solar-screens-for-windows/

This list uses bullet points but is there a way to change the default style of the bullets to be tick icons for the Pros & cross icons for the list of Cons?
Thanks

[David]

Hi there,

1. Select the List Block for Pros and in Advanced > Additional CSS Class(es) add: pro-list
2. Repeat for the Con list and add con-list

Now you can do this:

.entry-content ul.pro-list li:before {
    content: "\2713";
    color: #689931;
}

.entry-content ul.con-list li:before {
    content: "\2717";
    color: red;
}

Just change the Unicode for your symbols and the color if you want that to change that.

[MMS]

Apologies but where do I find the List Block? I can find Additional CSS under customize but not Advanced > Additional CSS Class

[David]

Are you using the Block Editor? If yes, then edit that page, and select the List. In the sidebar settings for that block you will see the Advanced Panel.

[MMS]

Thanks, But that seems to change the colour but not the symbol? I’ve added \2713 for the Tick and \2717 for the cross to the following page https://makemesustainable.com/what-are-solar-screens-for-windows/

Using this as the source for the code: https://www.toptal.com/designers/htmlarrows/symbols/

[David]

Sorry about that, It’s the cursed quote marks in the CSS, they can’t be “ curly, they have to be " straight.
I updated the code above to fix that:

https://generatepress.com/forums/topic/alternative-bullet-styles/#post-2411260

[MMS]

Thanks that works great.

[David]

Glad to hear that!

[Author]

Posts