web-dev-qa-db-fra.com

Utilisez FontAwesome ou Glyphicons avec css: before

Est-il possible d'intégrer HTML dans le css content: élément lorsqu’on utilise un :before pseudo-élément?

Je souhaite utiliser une police Awesome (ou un glyphicon) dans un cas d'utilisation comme celui-ci:

    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, existe-t-il un moyen d'utiliser <i> comme une liste balle? Cela fonctionne, mais ne se comporte pas correctement pour les éléments de puce multilignes:

<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>
csstwitter-bootstrapfont-awesome
75
tig

Ce que vous décrivez est en réalité ce que FontAwesome fait déjà. Ils appliquent la famille de polices FontAwesome au ::before pseudo élément de tout élément ayant une classe commençant par "icon-".

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

Ensuite, ils utilisent le pseudo-élément ::before pour placer l'icône dans l'élément avec la classe. Je viens d'aller à http://fortawesome.github.com/Font-Awesome/ et j'ai inspecté le code pour trouver ceci:

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

Donc, si vous souhaitez ajouter l’icône à nouveau, vous pouvez utiliser le ::after élément pour y parvenir. Ou pour la deuxième partie de votre question, vous pouvez utiliser le ::after pseudo-élément pour insérer le caractère de puce sous la forme d’un élément de la liste. Ensuite, utilisez le positionnement absolu pour le placer à gauche, ou quelque chose de similaire.

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

@keithwyland réponse est géniale. Voici un mixin SCSS:

@mixin font-awesome($content){
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: $content;
}

Usage:

@include font-awesome("\f054");
3
dude

Le réponse acceptée (au 29 juillet 2019) n'est valable que si vous n'avez pas encore commencé à utiliser les versions les plus récentes SVG avec JS approche de FontAwesome. Dans ce cas, vous devez suivre les instructions sur leur HowTo de pseudo-éléments CSS . En gros, il y a trois choses à surveiller:

  • placez l'attribut data sur le JS, y compris SCRIPT-Tag "pseudo-éléments de recherche de données"
  • faire en sorte que le pseudo-élément lui-même ait display: none
  • bonne combinaison police de caractères et poids de police pour l'icône dont vous avez besoin: "Font Awesome 5 Free" et 400 ou 900
0
flowtron

Dans le cas de vos éléments de liste, il existe un petit CSS que vous pouvez utiliser 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.

0
DarkBlue

Cette approche devrait être évitée. La valeur par défaut pour vertical-align est baseline. Si vous modifiez la famille de polices du pseudo-élément uniquement, des éléments ayant des polices différentes seront créés. Différentes polices peuvent avoir différentes métriques de police et différentes lignes de base. Pour aligner différentes lignes de base, la hauteur totale de l'élément devrait augmenter. Voir cet effet en action .

Il est toujours préférable d’avoir un élément par icône de police.

0
Keyamoon