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


156

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?

Réponses:


333

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.


12
J'ai fait une page de référence des codes de contenu CSS correspondant à chaque icône Font Awesome ici: astronautweb.co/snippet/font-awesome
Astrotim

1
Cette solution fonctionne même avec des éléments à plusieurs colonnes. (D'autres qui utilisent la position: absolu ne le font pas)
sbaechler

2
@Astrotim Vous pouvez obtenir ces codes directement à partir de la feuille de triche officielle de FontAwesome: fortawesome.github.io/Font-Awesome/cheatsheet
rybo111

1
Cette solution nécessite de légères révisions pour une utilisation avec FontAwesome 5. Vous avez besoin de la famille de polices: 'Font Awesome 5 Free'; ainsi qu'un poids de police explicite pour que cela fonctionne. Voir stackoverflow.com/questions/47894414/…
kloddant

1
Je dois ajouter un poids spécifique pour que cela fonctionne:font-weight: 900;
mayersdesign

62

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

Cela a fonctionné en vue pour moi comme ça<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
justin.m.chase

50

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>

18
Avec le dernier Font-Awesome, vous devez remplacer "icons-ul" par "fa-ul" et "icon-li" par "fa-li": [code] <ul class = "fa-ul"> <li class = " fa-li fa fa-check "> ... </li> </ul> [/ code]
Thomas

4

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.


3
Pour tous les débutants, cela est formaté dans un langage de prétraitement CSS appelé SASS. Le CSS pur ne peut pas être imbriqué de cette manière.
JoshWillik

1

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;
}

0

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

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.