web-dev-qa-db-fra.com

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

Je me demande s’il est possible d’utiliser des classes font-awesome (ou n’importe quelle autre police iconique) pour créer un type personnalisé <li> list-style-style?

J'utilise actuellement jQuery pour ce faire, à savoir:

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

Toutefois, cela n’apparaît pas correctement lorsque le texte <li> se termine sur la page, car il considère que l’icône fait partie du texte et non l’indicateur à puce.

Des conseils?

csshtml-listsfont-awesome
134
Darrrrrren

Le module Listes et compteurs CSS, niveau 3 introduit le pseudo-élément ::marker. 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 est d’ajouter du padding au parent ul et d’afficher l’icône dans ce padding:

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 iconique. Cependant, FontAwesome fournit sa propre façon de traiter ce "problème". Découvrez la réponse de Darrrrrren ci-dessous pour plus de détails.

285
banzomaikaka

Selon le Font Awesome Documentation :

<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
52
cutemachine

J'aimerais proposer une solution de remplacement plus simple, spécifique à FontAwesome. Si vous utilisez une police iconique différente, la réponse de JOPLOmacedo convient toujours parfaitement.

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>
44
Darrrrrren

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

Pour moi, le positionnement absolu du pseudo-élément: before fonctionne mieux. Je règle padding-left sur ul, la position négative est laissée sur l'élément before before, comme pour padding-left. Pour obtenir la distance du contenu de l'élément: avant l'élément à droite, il suffit de définir le padding-left sur 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.

2
habsi

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 voulez 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
Oscar Jovanny

Vous pouvez utiliser ul {list-style-image: url("")} si vous souhaitez télécharger une image sous l’icône li.

0
Jerry 132