[Support request] Adding Bootstrap SVG to CSS

[Warren]

I’d like to replace current PNG bullets with Bootstrap SVG icons via CSS. How can I achieve this?

Current code for normal png is this:

.entry-content ul li {
padding: 10px 0 10px 30px;
list-style: none;
background-image: url(‘http://path-to-my-website.com/wp-content/uploads/2022/02/checkmark.png’);
background-repeat: no-repeat;
background-position: left center;
background-size: 20px;
}

I’d like to replace the PNG with this:
https://icons.getbootstrap.com/icons/check-circle-fill/

How can I achieve this?

Thanks,

[David]

Hi there,

you will need to save the icon as a .svg file and upload it your media library.
By default WP won’t allow svg uploads, so you will need to install the SVG Support plugin.

Then in your CSS you will simply swap the background-image url for your SVG.

[Author]

Posts