Question

我正在尝试使用CSS在<ul>的列表项上设置自定义SVG图标。例如：

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

Answer 1

我会用：

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}

Answer 2

我正在使用：

＆＃13;

li {
	margin: 0;
	padding: 36px 0 36px 84px;
	list-style: none;
	background-image: url("../../images/checked_red.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px;
}

＆＃13;

其中background-size设置背景图片大小。

Answer 3

您可以在此处查看布局引擎如何确定列表图片大小：http://www.w3.org/wiki/CSS/Properties/list-style-image

在保持CSS优势的同时，有三种方法可以解决这个问题：

调整图像大小。
使用背景图片和填充代替（最简单的方法）。
使用viewBox时没有定义大小的SVG，当用作list-style-image时，会调整为1em（对Jeremy的称赞）。

Answer 4

您可能想尝试img标记而不是设置'list-style-image'属性。使用css设置宽度和高度实际上会裁剪图像。但是如果你使用img标签，图像将被重新调整为宽度和高度的值。

Answer 5

几乎像作弊一样，我只是进入了一个图像编辑器并将图像调整了一半。对我来说就像是一种魅力。

Answer 6

感谢Chris的出发点是一个改进，它解决了所用图像的大小调整问题，使用first-child只是为了表明你可以使用列表中的各种图标来完全控制。 / p>

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

这似乎在所有现代浏览器中运行良好，您需要确保左边的宽度和负边距具有相同的值，希望它有所帮助

Answer 7

我使用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;
}

我希望这对你有所帮助。

Answer 8

我通过将图像标签放在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 9

这是一个较晚的答案，但我将其放在此处供后人参考

您可以编辑svg并设置其大小。我喜欢使用svg的原因之一是因为您可以在文本编辑器中对其进行编辑。

以下是一个32 * 32的svg，我对其内部进行了大小调整，最初显示为10 * 10的图像。它非常适合替换列表图像

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

然后我将以下内容简单地添加到CSS中

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

list-style: none;很重要，因为它可以防止在加载备用图像时显示默认列表图像。

Answer 10

以下是使用 Inline SVG 获取列表项目符号的示例（2020年浏览器）

list-style-image: url("data:image/svg+xml,
                      <svg width='50' height='50'
                           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
                                 l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
                                 m-54 24v-24h9v24z'/></svg>")

使用SVG width和height来设置大小
玩M70 42来放置手
在FireFox或Chromium上的不同行为！
删除rect

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>

Answer 11

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

CSS list-style-image size

11 个答案: