Archived topic
Background of bullet list
1 reply · Started by Shivam on October 1, 2021
Viewing posts 1–2 of 2
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)
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;
}
This archived topic is closed to new replies.
