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

Question

Je me demande s'il est possible d'utiliser les classes de font-awesome (ou de toute autre police emblématique) pour créer une police personnalisée. <li> list-style-type ?

J'utilise actuellement jQuery pour ce faire :

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

Cependant, le style n'est pas correct lorsque l'option <li> Le texte s'enroule sur la page car il considère que l'icône fait partie du texte et non de l'indicateur de puce.

Des conseils ?

Answer 1

Le site Module Listes et compteurs CSS Niveau 3 présente le ::marker pseudo-é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 rembourrage au parent. ul et tirer l'icône dans ce rembourrage :

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/la taille de la police/etc à votre convenance, et c'est tout. Voici le bidouillage habituel : http://jsfiddle.net/joplomacedo/a8GxZ/

\=====

Cela fonctionne avec tout type de police iconique. 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.

Answer 2

Conformément à la Documentation sur 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

Answer 3

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

FontAwesome gère désormais les styles de liste en interne avec des 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>

Answer 4

J'ai fait deux choses inspirées par le commentaire de @OscarJovanny, avec quelques bidouillages.

Étape 1 :

• Téléchargez le fichier des icônes en format svg à partir de Ici car je n'ai besoin que de cette icône de la police 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

Answer 5

Je voulais ajouter à la réponse de JOPLOmacedo. Sa solution est ma préférée, mais j'ai toujours eu des problèmes avec l'indentation lorsque le li avait plus d'une ligne. C'était compliqué de trouver la bonne indentation avec les marges, etc. Mais cela ne concerne peut-être que moi.

Pour moi, le positionnement absolu de la :before Le pseudo-élément fonctionne le mieux. J'ai mis padding-left sur ul, position négative à gauche sur le :before comme l'élément ul padding-left . Pour obtenir la distance du contenu par rapport à la :before droit de l'élément je viens de mettre le padding-left sur la 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 tout ceci est clair et a une certaine valeur pour quelqu'un d'autre que moi.