Style de liste de li personnalisé avec icône font-awesome

Je me demande s'il est possible d'utiliser des classes font-awesome (ou toute autre police iconique) pour créer un <li>type de style de liste personnalisé ?

J'utilise actuellement jQuery pour ce faire, c'est-à-dire:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

Cependant, cela ne se style pas correctement lorsque le <li>texte enveloppe la page car il considère que l'icône fait partie du texte, pas l'indicateur de puce réel.

Des conseils?

Le module Listes et compteurs CSS niveau 3 présente le ::markerpseudo-élément. D'après ce que j'ai compris, cela permettrait une telle chose. Malheureusement, aucun navigateur ne semble le supporter .

Ce que vous pouvez faire, c'est ajouter un peu de remplissage au parent ulet tirer l'icône dans ce remplissage:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Ajustez le padding / font-size / etc à votre guise, et c'est tout. Voici le violon habituel: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Cela fonctionne avec tout type de police emblématique. FontAwesome, cependant, fournit sa propre façon de traiter ce «problème». Consultez la réponse de Darrrrrren ci-dessous pour plus de détails.

Selon la documentation Font Awesome :

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

Ou, en utilisant Jade:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

J'aimerais fournir une solution alternative plus simple, spécifique à FontAwesome. Si vous utilisez une police iconique différente, la réponse de JOPLOmacedo est toujours parfaitement adaptée.

FontAwesome gère désormais les styles de liste en interne avec les classes CSS .

Voici l'exemple officiel:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Je voulais ajouter à la réponse de JOPLOmacedo. Sa solution est ma préférée, mais j'ai toujours eu des problèmes d'indentation lorsque le li avait plus d'une ligne. Il était fastidieux de trouver l'indentation correcte avec les marges, etc. Mais cela pourrait ne concerner que moi.

Pour moi, le positionnement absolu du :beforepseudo-élément fonctionne le mieux. J'ai mis padding-leftsur ul, position négative à gauche sur l' :beforeélément, identique à ul padding-left. Pour obtenir la distance entre le contenu et l' :beforeélément correct, je viens de définir le padding-leftsur le li. Bien sûr, le li doit avoir une position relative. Par exemple

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

J'espère que cela est clair et a une certaine valeur pour quelqu'un d'autre que moi.

Je l'ai fait comme ça:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

Ou vous pouvez essayer ceci si vous souhaitez changer la couleur:

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

J'ai fait deux choses inspirées du commentaire de @OscarJovanny, avec quelques hacks.

Étape 1:

• Téléchargez le fichier d'icônes au format svg à partir d' ici , car je n'ai besoin que de cette icône de font awesome

Étape 2:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

Résultats