Archived topic
List style image
2 replies · Started by Bas on June 20, 2022
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
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 ...
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???
