how can i set custom bullet image of li tag?

Question

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

Answer 1

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: '';
}