Home/ Questions/Q 6699603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:42:53+00:00

I’m trying to set custom SVG icons with CSS on a <ul> ‘s list

  • 0

I’m trying to set custom SVG icons with CSS on a <ul>‘s list items. Example:

<ul>
    <li style="list-style-image: url('first.svg')">This is my first item</li>
    <li style="list-style-image: url('second.svg')">And here's my second</li>
</ul>

The problem is that the the images are too large, and stretch the height of the lines. I don’t want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image hack?

EDIT: Here’s a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image workaround, using CSS3’s background-size: http://jsfiddle.net/kP375/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using a <img /> tag instead of setting the list-style-image property. Setting the width and height properties in CSS will crop the image, but if you use a <img /> tag, the image can be re-sized using the value specified by width and height (CSS) properties or (HTML) attributes for that <img /> element.

    • 0