CSS list-style-image size

Question

J'essaie de définir des icônes SVG personnalisées à l'aide d'une feuille de style (CSS) sur une page d'accueil. <ul> Les éléments de la liste de Exemple :

<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>

Le problème est que les images sont trop grandes et dépassent la hauteur des lignes. Je ne veux pas changer la taille de l'image, car l'intérêt d'utiliser SVG est de s'adapter à la résolution. Existe-t-il un moyen de définir la taille de l'image à l'aide de CSS sans avoir recours à une sorte d'outil de gestion de l'image ? background-image hack ?

EDIT : Voici un aperçu (grande image délibérément choisie pour l'illustration et la dramatisation) : http://jsfiddle.net/tWQ65/4/
Et mon projet actuel background-image en utilisant la fonction background-size : http://jsfiddle.net/kP375/1/

Answer 1

J'ai fait une sorte d'émulateur de terminal avec Bootstrap y Javascript parce que j'avais besoin d'une certaine dynamique pour ajouter facilement de nouveaux éléments, et j'ai mis l'invite de Javascript .

HTML :

  <div class="panel panel-default">
      <div class="panel-heading">Comandos SQL ejecutados</div>
      <div class="panel-body panel-terminal-body">
          <ul id="ulCommand"></ul>
      </div>
 </div>

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

J'espère que cela vous aidera.

Answer 2

J'y suis parvenu en plaçant la balise image avant la balise li :

---

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

Answer 3

Essayez ceci.

.ul li {width:100px;height:100px}

Remerciements JJ