Can’t change color for custom bullet list

Hi there,

I could be wrong here but I can’t see how this would be a theme issue – it’s your custom HTML and CSS and I don’t see anything from the theme interfering.

I’m not seeing where the green color is coming from either.

Have you tested the solution without a child theme (I’m not sure what else is in there)?

Can you activate a Twenty series WP theme to test?

It does seem as if the issue is with Generate Press.

I changed it to Astra Child and it works. I changed it back now btw.

This is the css:

li.product-features-gutenberg  {

    font-size: 22px !important;
    list-style: none;
    line-height: 1;

}

 li.product-features-gutenberg:before   {
    
    content: "\2714";
    color: #F3921B !important;
    font-size: 32px;
    padding-right: 10px;

}

I know that some browsers such as Safari on iPhone don’t support it for some reason, but I’m not sure how that would be going on here.

• This reply was modified 1 year, 10 months ago by mr_eric_h.

Hi there,

the Heavy Checkmark is a unicode character that has an emoji equivalent that some devices will auto swap.

You can tell them not to by using the actual symbol followed by the variant selector. To keep the text symbol it would like this in your CSS:

li.product-features-gutenberg::before {
    content: "?\fe0e";
    color: #F3921B !important;
    font-size: 32px;
    padding-right: 10px;
}

More info on that here:

https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/