带列表的数据图标

Question

当我使用data-icon属性时，我的css有点问题。

我使用：before属性来做到这一点，我的图标显示在它上面，而不是像我想要的那样显示在左侧。

CSS：

[data-icon]:before {
    font-family: 'icons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

HTML：

<ul class="tags" data-icon="&#x54;">
    <li>Petrole</li>
    <li>Gazoil</li>
    <li>BP</li>
    <li>Car</li>
</ul>

希望你能弄明白。

Answer 1

您可以相对于其元素绝对定位图标：

[data-icon] {
    padding-left: 20px; /* Horizontal space for icon and some gap. */
    position: relative;
    min-height: 14px; /* Height of icon. */
}

[data-icon]:before {
    position: absolute;
    left: 0;
    top: 0;
}

另一种可能的方法是对项目使用display: inline或display: inline-block并生成伪元素图标：

[data-icon]:before,
[data-icon] > LI {
    display: inline;
}