帶列表的數據圖標

Question

當我使用數據圖標屬性時，我的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和產生pseudoelement圖標：

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