[Resolved] Replace bullets with an fa-icon

Hello Elvin

Thank you for your support.

I guess this is ul li::marker

Link provided.

Hello Elvin

Thank you for the support.

OK in principle I can see what needs to be done there,

but what I was wondering is,

how I can make the style available to the user, via the WYSIWYG editor, to apply to selected lines rather than apply the style to all ul ?

Thanks

Tim

Hello Leo

Thank you for the support.

I’m just going back a step, and following Elvin’s suggestion, I’m attempting to implement a single svg. From the cited page I’m trying to follow the example given.

ul {
  list-style: none; 
}

.entry-content ul li::marker {
  content: url(/wp-content/ui/check-circle.svg);
}

What is the best way to control the position such that the icon’s center appears roughly the same as the line of text, and also to put some space between the icon and the line of text ?

Thanks

Hello Leo

Thank you for the support.

Perhaps using the generate blocks is the way to go, but since content had already been created on the site I wanted to target the existing selector and modify in CSS.

What I have found is that when targeting li::marker changing the color in CSS does not render, nor did fill, width, height or padding. So I instead set the color, width and height in the svg and then targeted li::before to set the content and padding, which worked.

ul {
  list-style: none; 
}

.entry-content ul li::before {
  content: url(/wp-content/ui/check-circle.svg);
	padding-right: 10px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="#0066b2"/></svg>

For color at least I did read that it should be possible to set fill="currentcolor" in the svg and then modify the color of the containing element, but this didn’t work either.

So what I have works, but perhaps it is not best practice and I would prefer to be able to do it all from CSS.

Your thoughts are welcome.

Thanks