[Resolved] Background of bullet list

[Shivam]

I want to replace circle of bullet list with custom image.

So, I created a (16px*16px) image and added following CSS code in customizer

.entry-content ul li{
	list-style-image:url(https://www.blogginginc.com/wp-content/uploads/2021/10/Bullet-point-icons.svg);
	margin: .8em 0;}

I don’t know why my image is displaying too small. (screenshot)

[David]

Hi there,

its to do with the viewbox sizing in the SVG.
Scrap that method and try this instead:

.entry-content ul li {
    list-style: none;
    position: relative;
}

.entry-content ul li:before {
    content: '';
    position: absolute;
    left: -2em;
    top: 5px;
    height: 25px;
    width: 35px;
    background-image: url('https://www.blogginginc.com/wp-content/uploads/2021/10/Bullet-point-icons.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

[Author]

Posts