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


131

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.

Réponses:


248

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.


18
Une liste utile de traductions de ces icônes font-impressionnantes en valeurs css est ici: astronautweb.co/snippet/font-awesome
Scott C Wilson

24
Vous voudrez l'inclure pour supprimer les puces par défautul { list-style-type: none; }
Edd

Pourquoi cette méthode ne fonctionne-t-elle pas alors que j'ai deux listes sur la même page?
deKajoo

6
Très bien, la seule chose que je suggérerais pour mieux aligner les choses est d'utiliser margin: 0 0.2em 0 -1.2em;simplement augmenter / diminuer les deux valeurs du même montant pour obtenir l'espacement souhaité. Si vous utilisez une valeur de pixel fixe qui ne correspond pas correctement à votre police, vous remarquerez une différence sur les éléments de la liste multiligne.
freins

J'ai ajouté un préfixe ul à cela, sinon il essaierait de le faire si le client utilisait le cms pour créer une liste ordonnée (numérotée)
rtpHarry

154

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


12
Cela devrait être la bonne réponse, avec la nouvelle version de fa. Très bien fait, merci pour cette explication.
David

23
Je ne suis pas d'accord, la question demandait une solution utilisant une seule liste en CSS pur. Cela utilise du HTML supplémentaire, ainsi que des classes. Bien que ce soit définitivement la façon dont les documents FA spécifient pour le faire, ce n'est techniquement pas la solution à la question, et n'est pas utile si vous cherchez à le faire sans modifier votre sortie HTML.
Ryan

Je sais ce que vous recherchez - mais les gens qui n'écrivent pas constamment du CSS pur dans des situations où ils ne peuvent pas modifier leur HTML ???? (sérieusement, s'il vous plaît regardez à changer votre cadre Web) auront besoin de leur rappel de mémoire de requête Google pour créer un lien vers la manière de docs géniale de la police `` correcte '', juxtaposée à la réponse `` réelle '', à côté de l'autre pour décider. Je ne veux pas dire "il n'y a pas qu'une seule bonne réponse au problème" mais il n'y a pas ...
lol

1
Cette approche ne fonctionne pas bien avec les éléments de liste encapsulés sur plusieurs lignes, car l'identification sur des lignes supplémentaires ne s'étendra pas pour inclure la largeur de l'icône.
Lars Haugseth

2
Il vaut probablement la peine d'ajouter, avec FA 4.3 (probablement d'autres versions aussi) et Bootstrap 3, les éléments ulet lidoivent être définis position: relativecar l' fa-liélément est positionné en absolu. Sinon, ils flotteront tous en haut à gauche.
Jeremy Harris

14

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 [&#xf058;]ainsi\f058


4

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.


2
Vous n'avez pas besoin du balisage supplémentaire: li:beforepeut avoir une famille de polices différente de celle li-ci.
cimmanon le

@cimmanon: Bien que vous ayez vraiment raison, la documentation de Font Awesome suggère que vous devriez avoir le balisage supplémentaire. Techniquement, ce n'est pas nécessaire, cependant, je pense qu'il faudra peut-être fouiller dans les glyphes de la police pour savoir quelle clé est mappée à quel symbole. Cela demanderait du temps et de la patience, mais bien sûr, votre solution fonctionnera également.
cereallarceny

@cereallarceny - le problème que nous avons est que l'éditeur HTML (TinyMCE) pour le CMS produit le format que j'ai donné dans ma question. Donc, de ce point de vue, nous n'avons pas de contrôle sur la liste HTML. Sauf si nous configurons TinyMCE pour inclure l'élément i (et ne pas le supprimer en tant qu'élément vide).
BaronGrivet

Vous n'avez donc pas accès au HTML, avez-vous accès au CSS?
cereallarceny

Oui, accès complet au CSS.
BaronGrivet

1

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


1

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>

entrez la description de l'image ici

DÉMO ICI


1

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

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.