web-dev-qa-db-fra.com

Utiliser l'icône géniale de police comme contenu CSS

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?

htmlcssfont-awesome
225
sdvnksv

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

Démo

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";
}

Démo

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 */
}

Démo

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 */
}

Démo

534
Mr. Alien

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

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;
}
18
ersefuril
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

2
Pervez

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 .

1
Mahib

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;
}
0
Sudeep Bashistha

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.

0
Prusakov

Mise à jour pour Font Awesome 5 à l'aide de SCSS

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}
0
Friendly Code