Les polices d'icônes sont géniales pour votre site :voici pourquoi

Vous avez entendu parler d'icônes et vous avez presque certainement entendu parler de polices, mais qu'est-ce qu'une police d'icônes ? ? Aujourd'hui, je vais vous montrer ce que sont les polices d'icônes et comment vous pouvez les utiliser pour animer votre site Web. Commençons.

Que sont les polices d'icône ?

Les polices d'icônes sont exactement les mêmes que les polices "normales" - elles définissent l'aspect et la convivialité d'un morceau de texte. La grande différence ici est que les polices d'icônes ne contiennent pas de lettres et de chiffres, mais des symboles et des icônes. Cela peut vous confondre, car à quoi sert une police si vous ne pouvez pas écrire de lettres à votre mère !

Les polices d'icônes sont principalement utilisées pour styliser les sites Web. Comme ils sont basés sur des vecteurs, ils peuvent être redimensionnés, déplacés, stylisés et modifiés à l'aide de CSS. Cela offre un énorme avantage par rapport aux méthodes de conception traditionnelles telles que les images. L'aspect et la convivialité d'un grand nombre d'icônes peuvent être modifiés avec seulement quelques lignes de code. Vous n'avez pas besoin de modifier les images, d'ouvrir Photoshop ou de télécharger les nouveaux fichiers ; il vous suffit d'écrire du code.

Premiers pas

J'utiliserai Font Awesome pour ces exemples, mais la théorie peut être appliquée à de nombreux autres packs de polices.

Voici le code HTML de démarrage :

Il s'agit de la quantité minimale de code HTML requise pour produire une page Web. Je n'en expliquerai pas la majorité, car nous en avons parlé dans notre guide sur la création d'un site Web.

La ligne la plus importante est la suivante :

Cela charge la feuille de style Font Awesome à partir de son CDN. Sans cette ligne, votre site Web ne saurait pas ce qu'est Font Awesome, c'est donc très important. Cette feuille de style gère tout le dur travail d'intégration des polices Web et vous facilite généralement la tâche.

Les icônes Font Awesome sont définies par des classes CSS ajoutées à i Mots clés. Celles-ci ont été choisies car elles ne sont associées à aucun navigateur ou style défini par défaut, de sorte que vos icônes ne seront pas toutes gâchées. Vous pouvez également ajouter les classes à span balises, mais cela encombre votre code HTML.

Voici l'utilisation de base. Mettez ça dans votre corps balises :

 Ma première icône 

Voici à quoi cela ressemble :

Était-ce facile ? Décomposons-le. Deux classes sont nécessaires pour que Font Awesome fonctionne. Le premier s'appelle fa , qui signifie Font Awesome. Ceci est nécessaire pour toute icône, quelle que soit celle que vous utilisez. La deuxième classe spécifie l'icône particulière que vous souhaitez utiliser - cela peut être n'importe quoi, un avion, une personne ou une carte de crédit. Ceci est également préfixé par fa , et comme il s'agit d'une icône de rouage, son nom est fa-cog . Vous pouvez afficher une liste de toutes les icônes de Font Awesome sur leur site Web.

Essayez de remplacer l'icône du rouage par une autre.

Aller plus loin

Une fois que vous connaissez les bases, il est temps de passer à quelques astuces avancées.

Si vous ne voulez pas écrire votre propre CSS, vous pouvez utiliser les styles intégrés directement dans Font Awesome. Il existe de nombreuses classes que vous pouvez utiliser pour agrandir les icônes :

Une autre classe utile à utiliser est la fa-spin . Cela fera pivoter vos icônes et, combiné avec les classes de taille précédentes, vous pourrez produire de jolis effets. Voici le code :

Voici le résultat :

Il est facile de faire pivoter les icônes :utilisez la commande fa-rotate classe :

Le nombre à la fin définit les degrés de rotation de l'icône, mais ne vous laissez pas emporter. Vous êtes limité à 90 , 180 , ou 270 .

Une dernière astuce que vous pouvez faire est d'empiler. La fa-pile class vous permet de combiner deux ou plusieurs icônes ensemble. Voici le code :

Voici à quoi cela ressemble :

Une fois que vous commencez à combiner toutes ces différentes classes, les possibilités sont vraiment infinies.

CSS personnalisé

Parce que les polices d'icônes sont justes polices, vous pouvez les styliser avec CSS comme vous le feriez pour n'importe quel autre élément. Utiliser un peu de CSS3 peut aller très loin :

Voici le code HTML de cette icône :

Voici le CSS :

@keyframes déplacer { 
 de { marge-gauche :0 ; } 
 à { marge-gauche :400px ; } 
 } 
 .Bicyclette { 
 nom-animation :déplacer ; 
 durée de l'animation :4 s ; 
 } 

Ce CSS est assez basique, mais il a un impact important. Il ne s'agit pas d'un didacticiel CSS, vous voudrez peut-être apprendre le CSS si vous souhaitez en savoir plus sur le fonctionnement interne.

Vous pouvez faire des choses spéciales si vous le voulez vraiment :

Cela bégaie un peu afin de réduire la taille du fichier pour le Web. Voici le HTML :

Voici le CSS :

@keyframes fade { 
 de { opacité :0 ; } 
 à { opacité :1 ; } 
 } 
 .la personne { 
 opacité :0; 
 nom-animation :fondu ; 
 } 
 #p1 { 
 La couleur rouge; 
 durée de l'animation :2 s ; 
 } 
 #p2 { 
 couleur orange; 
 durée de l'animation :4 s ; 
 } 
 #p3 { 
 la couleur verte; 
 durée de l'animation :6 s ; 
 } 
 #p4 { 
 durée de l'animation :8 s ; 
 } 

Comme l'exemple précédent, cela utilise des animations CSS3. Une animation appelée fondu est créé, et chaque icône de personne implémente cette animation avec un timing variable. Il y a beaucoup de potentiel pour se déchaîner avec ces icônes et CSS3.

C'est tout pour aujourd'hui. Vous devriez maintenant pouvoir utiliser les polices d'icônes pour animer votre site Web ! Si vous n'êtes pas encore sûr de vos compétences, consultez ces sites de modèles CSS ou ces chaînes YouTube pour vous lancer dans la conception de sites Web.

Avez-vous appris quelque chose de nouveau aujourd'hui ? Quelle est votre police d'icônes préférée ? Faites-le nous savoir dans les commentaires ci-dessous !