Utilisez FontAwesome ou Glyphicons avec css: before

Question

Est-il possible d'intégrer le code HTML dans le css content: élément lors de l'utilisation d'un :before pseudo-élément?

Je veux utiliser une Police Génial (ou Glyphicon) dans un cas d'utilisation comme ceci:

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

Où X est quelque chose comme <i class="icon-cut"></i>.

Je peux bien sûr le faire manuellement en HTML, mais je veux vraiment utiliser :before dans ce cas.

De même, est-il possible d'utiliser <i> comme une liste de balle? Cela fonctionne, mais ne se comportent pas correctement pour les multi-ligne balle éléments:

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

Answer 1

Ce que vous décrivez est effectivement ce que FontAwesome le fait déjà. Ils appliquent la FontAwesome font-family à l' ::before pseudo-élément d'un élément qui a une classe qui commence par "icône".

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

Puis ils utilisent le pseudo élément ::before à la place de l'icône dans l'élément avec la classe. Je suis juste allé à http://fortawesome.github.com/Font-Awesome/ et inspecter le code pour trouver ceci:

.icon-cut:before {
  content: "\f0c4";
}

Donc, si vous êtes à la recherche d'ajouter l'icône de nouveau, vous peut utiliser l' ::after élément pour atteindre cet objectif. Ou pour votre deuxième partie de votre question, vous pouvez utiliser l' ::after pseudo élément à insérer le caractère de puce à ressembler à un élément de la liste. L'utilisation d'un positionnement absolu pour le placer à la gauche, ou quelque chose de similaire.

i:after{ content: '\2022';}

Answer 2

Dans le cas de vos éléments de liste, vous pouvez utiliser un peu de CSS pour obtenir l’effet souhaité.

 ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}
 

J'ai testé cela dans Safari sur OS X.

Answer 3

C'est le moyen le plus simple de faire ce que vous essayez de faire:

http://jsfiddle.net/ZEDHT/

 <style>
 ul {
   list-style-type: none;
 }
</style>

<ul class="icons">
 <li><i class="fa fa-bomb"></i> Lists</li>
 <li><i class="fa fa-bomb"></i> Buttons</li>
 <li><i class="fa fa-bomb"></i> Button groups</li>
 <li><i class="fa fa-bomb"></i> Navigation</li>
 <li><i class="fa fa-bomb"></i> Prepended form inputs</li>
</ul>
 

Answer 4

 <ul class="icons-ul">
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
</ul>
 

Toutes les icônes géniales de polices sont fournies par défaut avec Bootstrap.