CSS list-style-image size

Question

I\'m trying to set custom SVG icons with CSS on a

\'s list items. Example:

Answer 1

.your_class li {
    list-style-image: url('../images/image.svg');
}

.your_class li::marker {
    font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}

Answer 2

This is a late answer but I am putting it here for posterity

You can edit the svg and set its size. one of the reasons I like using svg's is because you can edit it in a text editor.

The following is a 32*32 svg which I internally resized to initially display as a 10*10 image. it worked perfectly to replace the list image

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

I then simply added the following to my css

* ul {
    list-style: none;
    list-style-image: url(../images/chevron-right.svg);
}

The list-style: none; is important as it prevents the default list image from displaying while the alternate image is being loaded.

Answer 3

I'd use:

li{
   list-style: none;
}
li::before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}

Answer 4

You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/list-style-image

There are three ways to do get around this while maintaining the benefits of CSS:

1. Resize the image.
2. Use a background-image and padding instead (easiest method).
3. Use an SVG without a defined size using viewBox that will then resize to 1em when used as a list-style-image (Kudos to Jeremy).

Answer 5

Thanks to Chris for the starting point here is a improvement which addresses the resizing of the images used, the use of first-child is just to indicate you could use a variety of icons within the list to give you full control.

ul li:first-child:before {
    content: '';
    display: inline-block;
    height: 25px;
    width: 35px;
    background-image: url('../images/Money.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -35px;
}

This seems to work well in all modern browsers, you will need to ensure that the width and the negative margin left have the same value, hope it helps

Answer 6

You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.