css - 将 SVG 图标定位为列表样式图像

Question

有没有一种快速简便的方法可以让我的 SVG 图标与相应的文本垂直居中？我能够让它接近，但我想把它推低一点。 This is as close as I've got

我是这样实现的:

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 图标。

感谢您的帮助!

Answer 1

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

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

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