css - 如何设置 li 标签的自定义元素符号图像？

Question

我正在尝试将自定义图像设置为元素符号。当我使用 background 或 background-image 标签时，它可以工作，但不能与列表类别正确对齐。当我使用 list-style-image 时，它​​不会将图像显示为元素符号。

问题:

CSS

Firebug

当我将鼠标移到它上面时，图像也显示在 Firebug 中

错误的最终输出

解决方案:

正确输出我想要的

Answer 1

这是我倾向于采用的一种方法。在 li 中添加一个 before，根据需要调整大小并为其添加背景图像。

然后只需撒上一些 flexbox 即可停止在元素符号下方环绕的文本。

我做了一个快速 jsfiddle to demonstrate it

li {
    display: flex;
    align-items: center;
    margin: 10px 0;

    line-height: 30px;

    list-style: none;
}

li:before {
    display: block;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    margin-right: 10px;

    vertical-align: middle;

    background: url('https://image.flaticon.com/icons/png/128/1168/1168671.png') no-repeat left center;
    background-size: contain;

    content: '';
}