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

Deflower

Try to add this css property into .vMenu liand check it out list-style-type: none; width:19px; height:19px; – Equuleus

And set background:url(...); instead of list-style-image:url(...) – Equuleus

I normally add it as a background image on the li, positioned left center with xpx of padding left. Can't say I've used list-style-image before – Catapult

@Adam i had also us a background image but when i am using padding from top in li at that time image does not set properly with li. i had also use line height property as well ass scroll but it does not working properly. – Deflower

background: url('/image/arrow.png') no-repeat left center; On the li. Try setting the height of the li to the height of your arrow (19px) and use the line-height to center the text. – Catapult

@AnandMehta : You need to customize only the height and width parent <div></div> part. Then set the image also like this way.. background:url('...') no-repeat top left; – Equuleus

@Equuleus thanks Ranjith for the precious help... sorry for the late reply to your comment... :) – Deflower

@AnandMehta : It's ok. welcome. :) – Equuleus

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

Catapult

thanks adam your answer is working exactly as what i want. thanks for doing such fruitful effort for give me solution of problem from your busy schedule.... thanks again. :) – Deflower

Answer 2

Put and li Class

and put class ' background link to the image as the bullet

Bolingbroke