Utilisation de L'icône Font Awesome pour les points de puce, avec un élément de liste unique
nous aimerions pouvoir utiliser une police impressionnante ( http://fortawesome.github.com/Font-Awesome / ) icône servant de point de repère pour les listes non ordonnées dans un SGC.
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 la marque 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 font-Famille différent, qui nécessiterait un élément distinct.
est-ce possible en utilisant des CSS purs? 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 un repli d'une image de fond, mais ce serait génial d'utiliser Font Awesome si possible.
7 réponses
la nouvelle fontawesome (version 4.0.3) rend cela vraiment 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
je voudrais construire sur certaines des réponses ci-dessus et donné ailleurs et suggère d'utiliser positionnement absolu avec le : avant pseudo classe . Un grand nombre des exemples ci-dessus (et dans des questions similaires) utilisent le 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.
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 en gros ça. Vous pouvez obtenir la valeur ISO à utiliser dans le contenu CSS sur le cheatsheet impressionnant . Il suffit d'utiliser les 4 derniers alphanumériques préfixés avec un antislash. Ainsi [] devient \f058
il y a un exemple d'utilisation de Font Awesome à côté d'une liste non classé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 pouvez pas le trouver qui fonctionne après avoir essayé ce code, alors vous n'incluez pas la bibliothèque correctement. Selon leur site web, vous devez inclure les bibliothèques comme telles:
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">
aussi vérifier le fantaisiste le post de Chris Coyier sur les polices d'icône sur son site web CSS Tricks .
voici un screencast par lui aussi parler de la façon de créer votre propre police d'icône-face.
@Tama, vous pouvez vérifier cette réponse: en utilisant des icônes de police impressionnant que les balles
fondamentalement, vous pouvez accomplir ceci en utilisant seulement CSS sans la nécessité de la majoration 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 post initial:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Merci.
Ma solution en utilisant la norme <ul> et <i> à l'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>
j'utilise http://icomoon.io / Il vous donne la possibilité de ne charger les polices d'icônes dont vous avez besoin. Choisissez les icônes que vous voulez, attachez la clé à l'icône et téléchargez une petite police plutôt que la police impressionnante complète (qui est toujours génial).
Voici mon expérience: http://jsfiddle.net/Annett/ZB7TK/