I am trying to set custom image as a bullet. when i am using background or background-image tag it is work but not align properly with list category. And when i am using list-style-image it is not displaying the image as a bullet.
Problem :
Css
Firebug
Image is also displaying in firebug when i move my mouse over on it
Wrong final output
Solution :
Correct Output what i want
Here's one method that I tend to lean on. Add a before
to the li
, size it as required and add a background image to it.
Then just sprinkle some flexbox on to stop the text wrapping underneath the bullet.
I made a quick jsfiddle to demonstrate it
li {
display: flex;
align-items: center;
margin: 10px 0;
line-height: 30px;
list-style: none;
}
li:before {
display: block;
flex-shrink: 0;
width: 33px;
height: 33px;
margin-right: 10px;
vertical-align: middle;
background: url('https://image.flaticon.com/icons/png/128/1168/1168671.png') no-repeat left center;
background-size: contain;
content: '';
}