Question

I have a little problem with my css when I’m using the data-icon attribute.

I used the :before property to do that and my icon is displayed on top of it and not on the left like I wanted.

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>

Hope you can figured it out.

Answer 1

You can position icon absolutely relative to its element:

[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;
}

Another possible way is to use display: inline or display: inline-block for items and generated pseudoelement icon:

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