Comment ajouter des icônes de polices géniales à vos boutons

Font Awesome est une bibliothèque pratique d'icônes. Ces icônes peuvent être des graphiques vectoriels stockés au .svgformat de fichier ou des polices Web.

Ces icônes sont traitées comme des polices. Vous pouvez spécifier leur taille en utilisant des pixels, et ils prendront la taille de police de leurs éléments HTML parents.

Utilisation basique

Pour inclure Font Awesome dans votre application ou page, ajoutez simplement le code suivant à l' élément en haut de votre HTML:

L' iélément était à l'origine utilisé pour rendre d'autres éléments en italique, mais il est maintenant couramment utilisé pour les icônes. Vous pouvez ajouter les classes Font Awesome à l' iélément pour le transformer en icône, par exemple:

Notez que l' spanélément est également acceptable pour une utilisation avec des icônes.

Voici comment ajouter une icône:

Cela produira une simple icône de pouce en l'air:

Et voici comment insérer cette icône sur un bouton:

 Like 

Notez que l'utilisation d'une icône comporte deux parties, le préfixe de style et le nom de l' icône . Dans l'exemple ci - dessus, le préfixe de style et le nom de l' icône sont faset fa-thumbs-up, respectivement.

Font Awesome propose les préfixes de style suivants:

StylePréfixe de styleType de plan
SolidefasLibre
OrdinairefarPro
LumièrefalPro
DuotonefadPro
MarquesfabLibre

Les icônes de marque sont souvent soumises par l'entreprise elle-même et sont utiles pour créer des éléments tels que des boutons d'authentification sociale ou de paiement. Ces icônes incluent Twitter, Facebook, Spotify, Apple et même freeCodeCamp:

Bien que vous n'ayez accès qu'aux icônes solides et de marque dans le cadre du plan gratuit, il existe encore de nombreuses façons de les styliser.

Styling Font Awesome Icônes

Pour les applications simples, vous pouvez utiliser des styles en ligne:

Pour le dimensionnement, vous pouvez également utiliser les mots-clés intégrés de Font Awesome:

Une chose importante à retenir est que les icônes FA héritent du font-sizeconteneur parent. Cela signifie que les icônes sont mises à l'échelle avec tout texte qui pourrait être utilisé avec elles, ce qui maintient la conception cohérente.

Par exemple, disons que vous souhaitez créer plusieurs boutons. La taille par défaut des boutons est assez petite, vous écrivez donc du CSS pour augmenter la taille des boutons, ainsi que le texte et les icônes qu'ils contiennent:

 Like    Dislike    Share 
button { font-size: 1.5em; margin: 5px; }

Vous pouvez également ajuster la taille d'une icône directement en ciblant l'icône elle-même et en ajustant sa font-size.

Font Awesome est, bien, génial! En tant que boîtes à outils d'icônes les plus populaires, elles sont faciles à inclure et à utiliser dans tous vos projets. Maintenant, allez sur l'icône de toutes les choses.

Plus d'information

  • Documents Font Awesome
  • Toutes les icônes Font Awesome disponibles