CSS list-style-image size

Question

I m trying to set custom SVG icons with CSS on a  lt ul gt  s list items  Example    lt ul gt       lt li style  list-style-image  url  first svg    gt This is my first item lt  li gt       lt li style  list-style-image  url  second svg    gt And here s my second lt  li gt   lt  ul gt    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

User · Answer

I achieved it by placing the image tag before the li's:

HTML

<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">

CSS

     .listImage{
      float:left;
      margin:2px;
      width:25px
     }
     .li{
      margin-left:29px;
     }

User · Answer

Here is an example to play with Inline SVG for a list bullet  2020 Browsers   list-style-image  url  quot data image svg xml                         lt svg width  50  height  50                             xmlns  http   www w3 org 2000 svg                              viewBox  0 0 72 72  gt                           lt rect width  100   height  100   fill  pink   gt                           lt path d  M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3                                  l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30                                  m-54 24v-24h9v24z   gt  lt  svg gt  quot     Play with SVG width  amp  height to set the size Play with M70 42 to position the hand different behaviour on FireFox or Chromium  remove the rect   x000D   x000D  li    font-size 2em    list-style-image  url  data image svg xml  lt svg width  3em  height  3em                           xmlns  http   www w3 org 2000 svg  viewBox  0 0 72 72  gt  lt rect width  100   height  100   fill  pink   gt  lt path d  M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z   gt  lt  svg gt        span    display inline-block    vertical-align top    margin-top -10px    margin-left -5px    x000D   lt ul gt     lt li gt  lt span gt Apples lt  span gt  lt  li gt     lt li gt  lt span gt Bananas lt  span gt  lt  li gt     lt li gt Oranges lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

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    Resize the image  Use a background-image and padding instead  easiest method   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

User · Answer

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   lt  xml version  1 0    gt  lt svg width  10  height  10   id  chevron-right  viewBox  0 0 32 32  xmlns  http   www w3 org 2000 svg  gt  lt path style  fill  34a89b   d  M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z   gt  lt  svg gt    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

User · Answer

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

User · Answer

Almost like cheating  I just went into an image editor and resized the image by half   Works like a charm for me

User · Answer

I d use  li     list-style  none    li  before     content         display  inline-block     height  y     width  x     background-image  url

User · Answer

I did a kind of terminal emulator with Bootstrap and Javascript because I needed some dynamic to add easily new items  and I put the prompt from Javascript   HTML        lt div class  panel panel-default  gt         lt div class  panel-heading  gt Comandos SQL ejecutados lt  div gt         lt div class  panel-body panel-terminal-body  gt             lt ul id  ulCommand  gt  lt  ul gt         lt  div gt    lt  div gt    Javascript   function addCommand command         Creating the li tag        var li   document createElement  li          Creating  the img tag     var prompt   document createElement  img          Setting the image      prompt setAttribute  src     lib custom img terminal-prompt-white png          Setting the width  like the font      prompt setAttribute  width   15px          Setting height as auto     prompt setAttribute  height   auto          Adding the prompt to the list item     li appendChild prompt         Creating a span tag to add the command       li appendChild  el comando      por que no es un nodo     var span   document createElement  span          Adding the text to the span tag     span innerHTML   command        Adding the span to the list item     li appendChild span         At the end  adding the list item to the list  ul      document getElementById  ulCommand   appendChild li       CSS    panel-terminal-body     background-color   423F3F    color   EDEDED    padding-left  50px    padding-right  50px    padding-top  15px    padding-bottom  15px    height  300px      panel-terminal-body ul     list-style  none      I hope this help you

User · Answer

I m using    x000D   x000D  li   x000D   margin  0  x000D   padding  36px 0 36px 84px  x000D   list-style  none  x000D   background-image  url        images checked red svg    x000D   background-repeat  no-repeat  x000D   background-position  left center  x000D   background-size  40px  x000D    x000D   x000D   x000D    where background-size set the background image size

User · Answer

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

User · Answer

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

[html] CSS list-style-image size

Examples related to html

Examples related to css