Je souhaite utiliser une icône de police géniale comme contenu CSS, c.-à-d.,
a:before {
content: "<i class='fa...'>...</i>";
}
Je sais que je ne peux pas utiliser de code HTML dans content
, est-ce qu'il ne reste que des images?
Mise à jour pour FontAwesome 5Merci à Aurelien
Vous devez modifier le font-family
en Font Awesome 5 Brands
OR Font Awesome 5 Free
, en fonction du type d'icône que vous essayez de rendre. De plus, n'oubliez pas de déclarer font-weight: 900;
a:before {
font-family: "Font Awesome 5 Free";
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
Vous pouvez lire le reste de la réponse ci-dessous pour comprendre son fonctionnement et connaître certaines solutions de rechange pour l'espacement entre l'icône et le texte.
FontAwesome 4 et inférieur
C'est la mauvaise façon de l'utiliser. Ouvrez la feuille de style font awesome, allez à la class
de la police que vous voulez utiliser, dites fa-phone
, copiez la propriété content sous cette classe avec l'entité et utilisez-la comme suit:
a:before {
font-family: FontAwesome;
content: "\f095";
}
Assurez-vous simplement que si vous souhaitez cibler une balise a
spécifique, envisagez d'utiliser une variable class
au lieu de la rendre plus spécifique, par exemple:
a.class_name:before {
font-family: FontAwesome;
content: "\f095";
}
En utilisant la méthode ci-dessus, l'icône restera collée avec le texte restant. Si vous voulez laisser un peu d'espace entre eux, faites-le display: inline-block;
et utilisez un padding-right
:
a:before {
font-family: FontAwesome;
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
Etendre cette réponse davantage, car bon nombre de personnes pourraient avoir l'obligation de changer une icône en survol, nous pouvons donc écrire un sélecteur et des règles distincts pour l'action :hover
:
a:hover:before {
content: "\f099"; /* Code of the icon you want to change on hover */
}
Dans l'exemple ci-dessus, les icônes changent de taille en raison de la taille différente et vous ne voulez sûrement pas cela. Vous pouvez donc définir une variable width
fixe dans la déclaration de base, comme
a:before {
/* Other properties here, look in the above code snippets */
width: 12px; /* add some desired width here to prevent Nudge */
}
Une autre solution sans que vous ayez à manipuler manuellement les caractères Unicode se trouve dans Rendre la police géniale, génial - Utilisation d'icônes sans balises i (disclaimer: j'ai écrit cet article).
En un mot, vous pouvez créer une nouvelle classe comme celle-ci:
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
Et utilisez-le ensuite avec n'importe quelle icône, par exemple:
<a class="icon fa-car" href="#">This is a link</a>
Si vous avez accès aux fichiers SCSS de font-awesome, vous pouvez utiliser cette solution simple:
.a:after {
// Import mixin from font-awesome/scss/mixins.scss
@include fa-icon();
// Use icon variable from font-awesome/scss/variables.scss
content: $fa-var-exclamation-triangle;
}
a:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Exemple de lien: https://codepen.io/bungeedesign/pen/XqeLQg
Obtenir le code d'icône auprès de: https://fontawesome.com/cheatsheet?from=io
Vous pouvez utiliser unicode pour cela en CSS. Si vous utilisez font awesome 5, c'est la syntaxe.
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
Vous pouvez voir leur documentation ici .
Vous devez définir le paramètre font-weight sur 900 pour Font Awesome 5 Free font-family au travail.
C'est celui qui travaille:
.css-selector::before {
font-family: 'Font Awesome 5 Free';
content: "\f101";
font-weight: 900;
}
Comme il est dit sur le site Web de FontAwesome FontAwesome =>
HTML:
<span class="icon login"></span> Login</li>
CSS:
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
Dans .login::before
-> éditez content:'';
en fonction de votre unicode.
Mise à jour pour Font Awesome 5 à l'aide de SCSS
.icon {
@extend %fa-icon;
@extend .fas;
&:before {
content: fa-content($fa-var-user);
}
}