CSS-lijst-stijl-afbeeldingsgrootte

li{
  font-size:2em;
  list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><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'/></svg>");
}
span{
  display:inline-block;
  vertical-align:top;
  margin-top:-10px;
  margin-left:-5px;
}

<ul>
  <li><span>Apples</span></li>
  <li><span>Bananas</span></li>
  <li>Oranges</li>
</ul>

Antwoord 8, Autoriteit 7%

.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 */
}

Antwoord 9

Ik heb een soort terminale emulator met Bootstrapen Javascriptomdat ik wat dynamiek nodig had om eenvoudig nieuwe items toe te voegen, en ik heb de prompt van 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;
}

Ik hoop dat dit je helpt.

Antwoord 10

Ik heb het bereikt door de afbeeldingstag voor de li’s te plaatsen:

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

Antwoord 11

Dit is een laat antwoord, maar ik plaats het hier voor het nageslacht

Je kunt de svg bewerken en de grootte instellen. een van de redenen waarom ik graag svg’s gebruik, is omdat je ze in een teksteditor kunt bewerken.

Het volgende is een 32*32 SVG die ik intern heb aangepast om in eerste instantie als een 10*10 afbeelding weer te geven. het werkte perfect om de lijstafbeelding te vervangen

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

Ik heb vervolgens eenvoudig het volgende toegevoegd aan mijn CSS

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

De list-style: none;is belangrijk omdat het voorkomt dat de standaardlijstafbeelding wordt weergegeven terwijl het alternatieve beeld wordt geladen.