Partagez cet article:Share on Google+0Share on Facebook0Tweet about this on Twitter

fa-3
Si vous créez ou insérez différentes icônes pour votre site web, voici une bibliothèque d’icônes qui pourrait vous intéresser, si vous ne la connaissez pas encore. Elle se nomme Font Awesome.

Font Awesome est une bibliothèque d’icônes vectorielles qui n’a pas besoin de JavaScript. Les icônes utilisées peuvent s’agrandir, se rétrécir et même s’animer sans que leur qualité en empatisse.

Comment l’installer

Par le Html

En mettant ce code dans la zone <head> de votre page.

Par le CSS

Si vous passez par un Framework tel que Sass, Compass par exemple. Attention toutefois, il se peut que l’importation de la bibliothèque par le lien ne fonctionne pas, il faudra alors rajouter le HTPP dans le lien.

En téléchargeant le fichier source

Vous pouvez importer toutes ces icônes directement dans votre projet en le téléchargeant manuellement, le lien se trouve sur la page d’accueil (vous ne pouvez pas louper le bouton pour le télécharger 🙂 ).
Ou en passant par la console (via Ruby par exemple). Je vous conseille de vous rendre directement sur ce lien si vous êtes intéressé par cette dernière méthode.

Choisir son icône

fa-1

Il suffit de vous rendre dans la partie icons. Ces icônes sont triées par catégories. Imaginons que je veuille rajouter une petite maison comme icône dans le menu de mon site. Je peux taper le mot « home » dans la barre de recherche et j’aurai alors comme résultat toutes les icônes qui contiennent le mot clef  « home ». Vous pouvez tout aussi bien vous aventurer dans la page pour chercher l’icône qui vous convient le mieux.

Vous cliquez ensuite sur l’icône en question et cela vous redirigera vers une page vous détaillant comment l’utiliser.

fa-2

Comment l’utiliser

Pour placer les icônes de Font Awesome, il faudra simplement mettre une balise <i></i> avec la classe Css que vous voulez utiliser.

Voici le code html que vous devez insérer dans le code HTML:

Un exemple

Le résultat

Accueil

Modifier le CSS

Vous pouvez modifier le css pour modifier la couleur de l’icône et lui mettre un padding, afin qu’elle soit un peu plus écartée du texte.

Vous pouvez si vous en avez besoin, modifier directement la class « fa-home ».

Le résultat

Accueil

Les autres possibilités

Font Awesome, vous propose en plus une liste de fonctionnalités que vous pourrez exécuter sans modifier votre css.

Icônes animées

Comme expliqué précédemment certaines icônes peuvent s’animer. Elles se trouvent dans la catégorie Spinner Icons

En rajoutant fa-spin ou fa-pulse en fonction de l’animation que vous recherchez et si elle est disponible.


 

Les rotations

Vous pouvez aussi faire des rotations sans passer par le css avec fa-rotate, fa-flip-horizontal, fa-flip-vertical

Si vous souhaitez en savoir plus, vous pouvez vous rendre directement sur cette page.