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

Question

Nous aimerions être en mesure d'utiliser une Police Génial ( http://fortawesome.github.com/Font-Awesome/ ) icône comme une puce pour les listes non ordonnées dans un CMS.

Cela signifie afficher les icônes lorsque le marché ressemble à ceci:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Le premier problème que je peux voir si la Police Génial nécessite une police différente-attribut de famille, qui aurait besoin d'un élément séparé.

Est-ce possible en utilisant uniquement du CSS? Ou aurais-je à ajouter l'élément au début de chaque élément de la liste à l'aide de quelque chose comme jQuery?

Je me rends compte que nous pouvons utiliser une chute en arrière d'une image d'arrière-plan, mais il serait bon d'utiliser la Police Génial si possible.

Merci à l'avance.

Answer 1

Solution:

http://jsfiddle.net/VR2hP/

 li:before {    
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
 

Answer 2

La nouvelle fontawesome (version 4.0.3) a légèrement changé les propriétés

Pour cela, nous utilisons 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

Answer 3

J'aimerais revenir sur certaines des réponses ci-dessus et ailleurs donnée et vous suggérons d'utiliser le positionnement absolu avec l' :avant de pseudo classe. Beaucoup des exemples ci-dessus (et dans les autres questions) sont en utilisant la coutume balises HTML, y compris la Police Impressionnant de la méthode de traitement. Cela va à l'encontre de la question d'origine, 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 principalement ça. Vous pouvez obtenir la valeur ISO pour une utilisation dans les CSS du contenu sur la Police Génial triche. Utilisez simplement les 4 derniers caractères alphanumériques précédé d'une barre oblique inverse. Donc, [] devient \f058

Answer 4

Il y a un exemple de la façon dont la Police Génial côtés une liste non trié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 pouvez pas trouver de travail après avoir essayé ce code, alors vous n'êtes pas, y compris la bibliothèque correctement. Selon leur site web, vous devez inclure les bibliothèques en tant que tel:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Consultez également le lunatique Chris Coyier post sur l'icône polices sur son site web CSS Astuces.

Voici un screencast par lui parler de la façon de créer votre propre icône font-face.

Answer 5

@Tama, vous voudrez peut-être vérifier cette réponse: en Utilisant la Police Impressionnant icônes comme des balles

Fondamentalement, vous pouvez accomplir cela en utilisant uniquement CSS sans la nécessité pour le balisage comme suggéré par FontAwesome et les autres réponses ici.

En d'autres termes, vous pouvez accomplir ce que vous avez besoin en utilisant la même base de balisage que vous avez mentionné dans votre post initial:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Merci.