css - 将 SVG 图标定位为 list-style-image

Question

有没有一种快速简便的方法可以让我的 SVG 图标与相应的文本垂直居中？我能够让它接近，但我想把它推低一点。这是我所拥有的

这是我实施它的方式：

HTML：

<ul class="list-goals">
<li>Some text for li number one</li>
<li>Some text for li number two</li>
<li>Some text for li number three</li>
</ul>

CSS：

    .list-goals li {
    margin-bottom: 1rem;
    background: url(../images/trophy.svg) no-repeat left top;
    padding: 0px 0 3px 24px;
}

我想我总是可以使用带有内置填充的 png，但我宁愿坚持我的 svg 并将定位或填充直接应用于 svg 图标。

谢谢您的帮助！

标签： csssvgicons

Answer 1

我知道这是一个迟到的答案，但你也可以试试这个。

li { list-style-image: url(img/iphone.svg); } 

您无需执行任何其他操作，因为 SVG 以默认间距应用。