[Support request] List style image

[Bas]

Normally this is something I can solve mysef, but this time nothing seems to work like it should 🙁

I want to add list style image (green stars) to the unordered list on this page: https://rugzakken.net/tabel-proef/

I would prefer to use this SVG-image (which should have the color #48892a):
https://rugzakken.net/wp-content/uploads/2022/06/star-fivepointed.svg

SVG is enabled by this snippet in functions.php (back-end only):
`function cc_mime_types($mimes) {
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);

Also, I’ve add the class ‘usps’ to the list in the Block Editor.

If SVG isn’t possible, this .png can be used for an alternative solution: https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png

[David]

Hi there,

you can use some CSS like so:

.entry-content ul.usps li {
    list-style-type: none;
    position: relative;
}
.entry-content ul.usps li:before {
    content: url('https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png');
    position: absolute;
    left: -10px;
}

the content: url('https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png'); property will work with a .svg but the image has to have the exact width and height your require it, as this cannot be modified with CSS. To do that would mean outputting a background image …

[Bas]

Hi David, thanks, for some reason it’s not as easy as it looks, especially since it’s hard to get rid of the disc-style.

I’ve changed it a little bit to this:

.entry-content ul.usps li {
list-style-type: none !important;
}
.entry-content ul.usps li:before {
content: url(‘https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png’) !important;
position: relative;
left: -22px;
}

The disc style (disc) is still present, but is now right behind the star. Very browser dependent, so quite tricky. Any other/better solution?? What did I miss???

[Author]

Posts