我試圖在<ul>的列表項上用CSS設置自定義SVG圖標。例如：CSS列表樣式圖像大小
<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>
問題是圖像太大，並且拉伸線的高度。我不想更改圖像大小，因爲使用SVG的要點是要根據分辨率進行縮放。有沒有辦法設置圖像的大小使用CSS沒有某種background-image黑客？
編輯：這裏是一個預覽（故意選擇用來說明和戲劇大圖）：http://jsfiddle.net/tWQ65/4/
而我目前的background-image的解決方法，使用CSS3的background-size：http://jsfiddle.net/kP375/1/
你可能會想嘗試img標籤，而不是設置' list-style-image'屬性。使用css設置寬度和高度實際上會裁剪圖像。但是如果你使用img標籤，圖像將被重新設置爲寬度和高度值。
圖像標記的問題是它更難如果我爲不同的行重用一些圖標，稍後再進行更改。它還混合了內容和演示文稿，我儘可能避免出現這種情況。不過，如果沒有其他方法正確，我會記住它。 – BitLooter
請試試這個。
.ul li {width:100px;height:100px}
這隻會讓事情變得更糟，不僅它仍然是垂直拉伸，它現在正在水平壓扁，同時爲圖像做千斤頂。經過Chrome和Opera測試。 – BitLooter
幾乎就像作弊，我剛進入一個圖像編輯器，並調整了一半圖像的大小。對我來說就像一個魅力。
這裏你可以看到引擎如何佈局確定一覽圖像尺寸：http://www.w3.org/wiki/CSS/Properties/list-style-image
有三種方式解決此獲得，同時保持CSS的好處：
viewBox，然後將其作爲list-style-image（傑瑞米的榮譽）使用時調整爲1em。從鏈接的W3C文檔中的規則看來，最好的解決方案實際上是從SVG文件中刪除'width'和'height'聲明。 – Jeremy
這就是我正在用＃3得到的，雖然正如我所說的，我不確定這是如何完成的，看到SVG文檔通常需要基於聲明的文檔高度和寬度的X和Y座標。 – CourtDemone
那麼，如果你有一個沒有聲明寬度和高度的SVG圖像，而是一個'viewBox'，我想你會得到想要的效果。在瀏覽器中單獨查看圖像會填滿窗口（保留寬高比），所以我想象一個'list-style-image'，它將填充可用空間，即'1em'。 – Jeremy
我會使用：
li{
list-style: none;
}
li:before{
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}
沒有工作，我甚至嘗試'background-size：16px auto;' – BillyNair
'background-size：contains'是更好的選擇，但我不知道爲什麼它不適合你。我將所有SVG圖像的高度和寬度設置爲100％，除非您在SVG中設置了這些圖像，否則某些瀏覽器很有趣。 – Chris
'.ladybug { \t list-style：none; } .ladybug：之前{ \t內容：''; \t display：inline-block; \t身高：1em; \t width：1em; \t background-image：url（http://www.openclipart.org/people/lemmling/lemmling_Ladybug.svg）; \t background-size：contains; \t background-repeat：no-repeat; }'這樣做的好處是您可以調整大小，甚至可以獨立進行動畫製作。我知道它在Firefox和Chrome中適合我。 – Chris
感謝Chris對於這裏的出發點是解決了圖像使用的大小調整改進，使用第一代孩子只是爲了表示你可以使用列表中的各種圖標可以完全控制。
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;
}
這似乎在所有現代瀏覽器很好地工作，你將需要確保寬度和左緣陰性具有相同的價值，希望它有助於
我做了一種終端仿真器與Bootstrap和Javascript，因爲我需要一些動態來輕鬆添加新項目，並且我提示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;
}
我希望這可以幫助您。
我使用：
li {
\t margin: 0;
\t padding: 36px 0 36px 84px;
\t list-style: none;
\t background-image: url("../../images/checked_red.svg");
\t background-repeat: no-repeat;
\t background-position: left center;
\t background-size: 40px;
}哪裏背景大小設置背景圖片的大小。
圖標字體是一個很好的技巧http://stackoverflow.com/questions/13129995/how-to-use-icon-fonts/13130383#13130383並可能涵蓋一些案例 –