Utilisation de l’icône Police Awesome pour les puces, avec un élément d’élément de liste unique

Nous aimerions pouvoir utiliser une icône Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) comme point pour les listes non ordonnées dans un CMS.

L’éditeur de texte du CMS ne génère que du HTML brut, de sorte que des éléments / classes supplémentaires ne peuvent pas être ajoutés.

Cela signifie afficher les icons lorsque le balisage ressemble à ceci:

  • Item 1
  • Item 2
  • Item 3

Le premier problème que je peux voir si Font Awesome nécessite un atsortingbut font-family différent, ce qui nécessiterait un élément séparé.

Est-ce possible en utilisant du CSS pur? Ou devrais-je append l’élément au début de chaque élément de la liste en utilisant quelque chose comme jQuery?

Je me rends compte que nous pouvons utiliser une image de fond, mais ce serait bien d’utiliser Font Awesome si possible.

Solution:

http://jsfiddle.net/VR2hP/

 li:before { font-family: 'FontAwesome'; content: '\f067'; margin:0 5px 0 -15px; color: #f00; } 

Voici un article de blog qui explique cette technique en profondeur.

La nouvelle fontawesome (version 4.0.3) rend cette opération très simple. Nous utilisons simplement les classes suivantes:

 
  • List icons (like these)
  • can be used
  • to replace
  • default bullets in lists

Selon cette (nouvelle) URL: http://fontawesome.io/examples/#list

Je voudrais développer certaines des réponses ci-dessus et données ailleurs et suggérer d’utiliser le positionnement absolu avec la pseudo-classe: before . Un grand nombre des exemples ci-dessus (et dans des questions similaires) utilisent un balisage HTML personnalisé, y compris la méthode de gestion de Font Awesome. Cela va à l’encontre de la question initiale et n’est pas ssortingctement nécessaire.

DÉMO ICI

 ul { list-style-type: none; padding-left: 20px; } li { position: relative; padding-left: 20px; margin-bottom: 10px } li:before { position: absolute; top: 0; left: 0; font-family: FontAwesome; content: "\f058"; color: green; } 

C’est fondamentalement ça. Vous pouvez obtenir la valeur ISO à utiliser dans le contenu CSS de la feuille de saisie Font Awesome . Utilisez simplement les 4 derniers caractères alphanumériques précédés d’une barre oblique inverse. Donc [] devient \f058

Vous trouverez un exemple d’utilisation de Font Awesome à côté d’une liste non ordonnée sur leur page d’exemples .

 
  • Lists
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs

Si vous ne le trouvez pas après avoir essayé ce code, vous n’incluez pas correctement la bibliothèque. Selon leur site Web, vous devriez inclure les bibliothèques en tant que telles:

   

Jetez également un œil à la publication fantaisiste de Chris Coyier sur les fonts icon sur son site Web, Tricks CSS .

Voici un screencast par lui aussi pour parler de la façon de créer votre propre fonte d’icons.

@Tama, vous voudrez peut-être vérifier cette réponse: Utilisation des icons Font Awesome comme des puces

Fondamentalement, vous pouvez accomplir cela en utilisant uniquement le CSS sans le balisage supplémentaire suggéré par FontAwesome et les autres réponses ici.

En d’autres termes, vous pouvez accomplir ce dont vous avez besoin en utilisant le même balisage de base que vous avez mentionné dans votre message initial:

 
  • ...
  • ...
  • ...

Merci.

Ma solution utilisant

    et standard

  •   
    • Paypal
    • Apple Pay
    • Ssortingpe
    • VISA

    entrer la description de l'image ici

    DÉMO ICI

    J’utilise http://icomoon.io/ Il vous permet de charger uniquement les icons de police dont vous avez besoin. Choisissez les icons que vous voulez, attachez la clé à l’icône et téléchargez une petite police plutôt que la police complète (qui est toujours géniale).

    Voici mon expérience: http://jsfiddle.net/Annett/ZB7TK/