Utiliser des icônes impressionnantes de police en CSS


305

J'ai du CSS qui ressemble à ceci:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Je voudrais remplacer l'image par une icône de Font Awesome .

Je ne vois pas de toute façon utiliser l'icône en CSS comme image de fond. Est-ce possible de faire en supposant que les feuilles de style / polices Font Awesome soient chargées avant mon CSS?


Les glyphes des polices ne peuvent pas être utilisés comme arrière-plans. Les SVG, cependant, peuvent
cimmanon

@cimmanon voudriez-vous expliquer comment cela pourrait s'appliquer à font-awesome
BonsaiOak

@BonsaiOak Que faut-il expliquer qui ne soit pas déjà expliqué par la réponse sélectionnée? Si vous avez une question à laquelle cela ne répond pas (ou toute autre question sur SO), posez une nouvelle question.
cimmanon

@cimmanon désolé pour le manque de clarté. Vous sembliez impliquer qu'il était possible d'utiliser une icône du fichier de police font-awesome.svg comme arrière-plan. Cependant, vous ne l'avez jamais dit explicitement, donc je ne suis pas sûr.
BonsaiOak

1
@BonsaiOak Oui, vous pouvez utiliser un SVG comme image d'arrière-plan, de la même manière que vous utiliseriez n'importe quelle autre image. Cependant, je n'ai pas réellement regardé le SVG FontAwesome pour vérifier qu'il peut être utilisé de cette manière.
cimmanon

Réponses:


489

Vous ne pouvez pas utiliser le texte comme image d'arrière-plan, mais vous pouvez utiliser la :beforeou les :afterpseudo-classes pour placer un caractère de texte où vous le souhaitez, sans avoir à ajouter toutes sortes de balises supplémentaires compliquées.

Veillez à définir position:relativevotre wrapper de texte réel pour que le positionnement fonctionne.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

ÉDITER:

Font Awesome v5 utilise d'autres noms de police que les anciennes versions:

  • Pour FontAwesome v5, version gratuite, utilisez: font-family: "Font Awesome 5 Free"
  • Pour FontAwesome v5, version Pro, utilisez: font-family: "Font Awesome 5 Pro"

Notez que vous devez également définir la même propriété font-weight (semble être 900).

Une autre façon de trouver le nom de la police est de cliquer avec le bouton droit sur un exemple d'icône de police impressionnante sur votre page et d'obtenir le nom de la police (de la même manière que le code d'icône utf-8 peut être trouvé, mais notez que vous pouvez le trouver :before).


63
L'équivalent textuel de chaque icône est là fortawesome.github.io/Font-Awesome/cheatsheet
Matthieu

61
Vous devrez supprimer & # x depuis le début et; à partir de la fin. Le nom de la famille de police est FontAwesome
Matthieu

5
@David, c'est juste du texte, utilisez font-size.
JCM

6
pour FontAwesome v5, vous devez utiliser .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad

5
Juste une note que cela ne semble pas fonctionner avec les éléments d'entrée (comme un bouton d'envoi) car ils ne semblent pas prendre en charge: avant ou: après.
Mir

70

Suite à la réponse de Diodeus ci-dessus, vous avez besoin de la font-family: FontAwesomerègle (en supposant que la @font-facerègle pour FontAwesome soit déjà déclarée dans votre CSS). Il s'agit ensuite de savoir quelle valeur de contenu CSS correspond à quelle icône.

Je les ai tous répertoriés ici: http://astronautweb.co/snippet/font-awesome/


1
travaillé après avoir supprimé la position: absolue; dans le .element: avant, maintenant je peux décorer mes liens avec des icônes géniales de police mais garder ma police personnalisée du lien
jethroo

grande liste de valeurs de contenu!
Anthony

1
Comme indiqué dans la réponse de @staabm, FontAwesome maintient une liste officielle des codes pour chaque glyphe: fontawesome.io/cheatsheet
alxndr

24

En fait, même font-awesomeCSS a une stratégie similaire pour définir leurs styles d'icônes. Si vous voulez obtenir rapidement le icon code , vérifiez le non-minified font-awesome.cssfichier et les voici ... chaque police dans sa pureté.

Capture d'écran du fichier CSS Font-Awesome


22

Consolider tout ce qui précède, ce qui suit est la classe finale qui fonctionne bien

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

meilleure réponse, car vous pouvez simplement supprimer une balise <i> précédente avant le texte souhaité avec l'icône et la remplacer par celle-ci. Et le même espace est donné.
andygoestohollywood

7

Vous pouvez essayer cet exemple de classe. et trouvez le contenu des icônes ici: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    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);
    content: "\f007";
    }

6

Pour utiliser une police géniale à l'aide de CSS, suivez les étapes ci-dessous -

étape 1 - Ajouter des polices de FontAwesome en CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Étape - 2 Utilisez ci-dessous CSS pour appliquer la police sur l'élément de classe HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

Et enfin, utilisez la classe " sorting_asc " pour appliquer le CSS sur la balise / l'élément HTML souhaité.


2

Pas besoin d'incorporer du contenu dans le CSS. Vous pouvez mettre le contenu du badge à l'intérieur de l'élément fa, puis ajuster le CSS du badge. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

8
Msgstr "Pas besoin d 'intégrer du contenu dans le CSS". Eh bien, dans certaines situations, c'est nécessaire.
Stéphane Bruckert

2
Si vous ne vous souciez pas de l'amélioration progressive, c'est bien, mais vous devriez vraiment garder votre style à l'intérieur d'un fichier css dans la mesure du possible.
Adam Carr

2

Alternativement, si vous utilisez Sass, on peut "étendre" les icônes FA pour les afficher:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}


0

Pour cela, il vous suffit d'ajouter un contentattribut etfont-family attribut à l'élément requis via: avant ou: après, le cas échéant.

Par exemple: je voulais joindre une icône de pièce jointe après tout l' aélément à l'intérieur de mon message. Donc, je dois d'abord rechercher si une telle icône existe dans fontawesome. Comme dans le cas où je l'ai trouvé ici , c'est à dire fa fa-paperclip. Ensuite, je cliquais sur l'icône avec le bouton droit de la souris et j'allais dans la ::beforepseudo propriété pour récupérer la contentbalise qu'elle utilise, ce que j'ai trouvé dans mon cas \f0c6. Ensuite, je l'utiliserais dans mon CSS comme ceci:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.