Replace bullets with an fa-icon

hi Tim,

Can you link us to the page w/ the bullet points? So we can instead and get the right selectors for you to use. :)

While waiting, here's a warning:

Your site may take a performance hit for using FontAwesome.

That said, consider using an SVG instead of a font icon so you don't have to load a whole font set just to replace a list decoration. :)

Hello Elvin

Thank you for your support.

I guess this is ul li::marker

Link provided.

Yes but that's defined by this:

ul {
    list-style: disc;
}

What you'd have to do is set it to list-style: none; and then add a pseudo element to replace it.

This article explains it in details - https://web.dev/css-marker-pseudo-element/

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

You would need to add a custom class to the list and target your CSS specifically to that class.

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

I think the best way to achieve what you have is to use the headline blocks with icons from GenerateBlocks:
https://docs.generateblocks.com/article/headline-overview/

It has options like icon size, alignment and padding:
https://docs.generateblocks.com/article/headline-overview/#icon

It would be a lot easier if you are not comfortable with CSS.

You can see an example in the pricing table towards the bottom of this page:
https://generatepress.com/premium/

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

Looks good to me if it works for you :)