[Résolu] Font-icon avec un pseudo-élément ::before et texte décal

Bonjour à tous,

je rencontre souvent le même problème pour caler du texte et une font-icon appelée avec un :before.

J'explique:
J'ai une liste toute bête : ul li
pour la déco, à la place d'une vignette en background de mon li j'appelle une font-icon avec un :before , ça fonctionne très bien excepté que le texte lorsqu'il revient à la ligne, se place SOUS la font-icon (fonctionnement normal) -> Voir l'image ci-dessous :


et donc, je ne sais pas comment faire pour corriger ça et que le texte ne revienne pas SOUS l'icon ! Help ! quelqu’un a t'il déjà rencontré ce problème ET sa solution qui marchaient tranquillement en se tenant la main s'y'ou plait ?

mon HTML tout simple

<ul>
<li></li>
<li></li>
</ul>

et mon CSS :

 ul li::before{content: "\f0a9";font-family: fontawesome;padding-right:9px;}

merci d'avance !

Bonjour Eviouchka,

En css, le contrôle de la position de la puce dans les liste est faite par la propriété list-style-position.

C'est-à-dire que cette propriété permet de faire à ce que la puce, soit fasse partie intégrante du texte (ton cas), soit est placée à l'extérieur de la zone de texte (le cas recherché).

Je ne crois pas que le fait qu'il s'agisse d'une font-icône ou d'un élément généré n'interfère avec cette propriété.

Bonne journée.
Modifié par Greg_Lumiere (16 Jun 2016 - 10:58)

Bonjour Greg,

ça ne fonctionne pas avec la propriété list-style-position j'ai testé, il me semble que c'est parce que ma font-icon fait justement partie intégrante du texte puisqu'elle est placée avec un :before.

Merci quand même

Et ton :before est-il positionné en absolue ou en relative ?

Pour le fun

6l20 a écrit :
Pour le fun

Hé bien tu souhaiteras un bon anniversaire à Eléonore et je t'échange ton poney contre 3 cartes super++



Voilà qui me détend après un bon repas.
Modifié par Greg_Lumiere (16 Jun 2016 - 13:09)

@6l20 !!!

mais t'as mangé combien d'kilos de kiwis pour trouver ça ?????

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

eviouchka a écrit :
@6l20 !!!
mais t'as mangé combien d'kilos de kiwis pour trouver ça ?????
Merci

C'est trop d'honneur...
Le talent ma bonne dame, le talent
J'aime bien trouver des solutions à la con en moins de trente secondes
nb : Pour les autres, oui, c'est de l'humour

Il y a certainement mieux à faire que cette bidouille, de plus évident, "standard", mais j'avais la flemme de chercher

De rien

Et si un plus fort que moi trouve une solution moins "capilotractée", qu'il nous en fasse part maintenant où se taise à jamais !
Non, je plaisante, toute réponse est bonne à prendre même dans 10 ans

@Greg, j'accepte le deal
Modifié par 6l20 (16 Jun 2016 - 19:18)