Utilisation de l'icône Font Awesome pour les puces, avec un seul élément d'élément de liste

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

L'éditeur de texte du CMS ne produit que du HTML brut, de sorte que des éléments / classes supplémentaires ne peuvent pas être ajoutés.

Cela signifie afficher les icônes lorsque le balisage ressemble à ceci:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Le premier problème, je peux voir si Font Awesome nécessite un attribut de famille de polices différent, ce qui nécessiterait un élément séparé.

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

Je me rends compte que nous pouvons utiliser une image de secours d'une image d'arrière-plan, mais ce serait génial d'utiliser Font Awesome si possible.

Solution:

http://jsfiddle.net/VR2hP/

ul 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.

Le nouveau fontawesome (version 4.0.3) rend cela très facile à faire. Nous utilisons simplement les classes suivantes:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

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

J'aimerais m'appuyer sur 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 strictement 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 sur la feuille de triche Font Awesome . Utilisez simplement les 4 derniers caractères alphanumériques précédés d'une barre oblique inverse. Devient []ainsi\f058

Il existe un exemple d'utilisation de Font Awesome avec une liste non ordonnée sur leur page d'exemples .

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

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

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Consultez également l'article fantasque de Chris Coyier sur les polices d'icônes sur son site Web CSS Tricks .

Voici un screencast de lui expliquant également comment créer votre propre icône de police.

@Tama, vous voudrez peut-être vérifier cette réponse: Utiliser les icônes Font Awesome comme puces

Fondamentalement, vous pouvez accomplir cela en utilisant uniquement CSS sans avoir besoin du balisage supplémentaire comme 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:

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

Merci.

Ma solution utilisant le standard <ul>et l' <i>intérieur<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

DÉMO ICI

Dans Font Awesome 5, cela peut être fait en utilisant du CSS pur comme dans certaines des réponses ci-dessus avec quelques modifications.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Sans le poids de police correct, il affichera uniquement un carré vide.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define