Utilisation de l'icône Font Awesome pour les puces, avec un seul élément d'élément de liste
Nous aimerions pouvoir utiliser une icône Police Awesome ( http://fortawesome.github.com/Font-Awesome/ ) comme point de repère pour les listes non ordonnées dans un CMS.
L'éditeur de texte sur le CMS ne génère que du code HTML brut, ce qui empêche l'ajout d'éléments/classes supplémentaires.
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 que je vois si Font Awesome nécessite un attribut différent, qui nécessiterait un élément séparé.
Est-ce possible d'utiliser du CSS pur? Ou devrais-je ajouter l'élément au début de chaque élément de la liste en utilisant quelque chose comme jQuery?
Je me rends compte que nous pouvons utiliser une image de fond, mais ce serait bien d’utiliser Font Awesome si possible.
Solution:
ul li:before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
Voici un blog post qui explique cette technique en profondeur.
La nouvelle 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
J'aimerais développer certaines des réponses ci-dessus et données ailleurs et suggérer d'utiliser positionnement absolu avec le : before pseudo class. Un grand nombre des exemples ci-dessus (et de questions similaires) utilisent un balisage HTML personnalisé, y compris la méthode de traitement de Font Awesome. Cela va à l’encontre de la question initiale et n’est pas strictement nécessaire.
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 le Police Awesome . Utilisez simplement les 4 derniers caractères alphanumériques précédés d’une barre oblique inverse. Donc [] devient \f058
Il existe un exemple d'utilisation de Font Awesome avec une liste non ordonnée sur leur page 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 que cela fonctionne après avoir essayé ce code, vous n'incluez pas correctement la bibliothèque. Selon leur site Web, vous devriez inclure les bibliothèques en tant que telles:
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">
Jetez également un coup d'œil au billet fantaisiste Chris Coyier sur les polices de caractères sur son site Web CSS Tricks .
Voici un screencast par lui aussi parler de la façon de créer votre propre police font-face.
@Tama, vous voudrez peut-être vérifier votre réponse: Utiliser les icônes Font Awesome comme puces
Fondamentalement, vous pouvez y parvenir en utilisant uniquement le CSS sans avoir besoin du balisage supplémentaire comme suggéré par FontAwesome et les autres réponses fournies ici.
En d'autres termes, vous pouvez accomplir ce dont vous avez besoin en utilisant le balisage de base que vous avez mentionné dans votre message initial:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Merci.
Ma solution utilisant les standards <ul> et <i> dans <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>
