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

Vous avez entendu parler des icônes, et vous avez presque certainement entendu parler des polices, mais quel est un Icon Font? Aujourd'hui, je vais vous montrer ce que sont les polices d'icônes et comment les utiliser pour animer votre site Web. Commençons.

Que sont les polices d'icônes??

Les polices d'icônes sont exactement les mêmes que “ordinaire” polices de caractères - 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. Vous pouvez être dérouté par ceci, à 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 des sites Web. Comme ils sont basés sur des vecteurs, ils peuvent être redimensionnés, déplacés, stylés et modifiés à l’aide de CSS. Les changements les plus importants survenus sur le Web au cours de la dernière décennie ont ouvert la voie à la séparation du style et du contenu. De manière moderne, XHTML définit la structure sémantique… Lire la suite. Cela offre un avantage considérable 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 des images, d'ouvrir Photoshop ou de télécharger les nouveaux fichiers - vous écrivez simplement du code.

Commencer

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épart:

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

La ligne la plus importante est la suivante:

Ceci 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, il est donc très important. Cette feuille de style gère tout le travail d’incorporation de polices Web et vous facilite généralement beaucoup les choses..

Les icônes Font Awesome sont définies par les classes CSS ajoutées à je Mots clés. Celles-ci ont été choisies car aucun navigateur ni style défini par défaut n'y est associé, afin que vos icônes ne soient pas gâchées. Alternativement, vous pouvez ajouter les classes à envergure balises, mais cela encombrer votre HTML.

Voici l'utilisation de base. Mettez ceci dans votre corps Mots clés:

 Ma première icône

Voici à quoi ça ressemble:

Comment était-ce facile? Faisons le décomposer. Il faut deux classes pour que Font Awesome fonctionne. Le premier s'appelle FA, qui représente Font Awesome. Ceci est nécessaire pour n'importe quelle icône, peu importe celle que vous utilisez. La deuxième classe spécifie l'icône 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 cog, son nom est fa-cog. Vous pouvez afficher une liste de toutes les icônes de Font Awesome sur leur site Web..

Essayez de changer l'icône du rouage en un autre.

Aller plus loin

Une fois que vous connaissez les bases, il est temps de passer à autre chose.

Si vous ne voulez pas écrire votre propre CSS, vous pouvez utiliser les styles directement intégrés à 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 vous fera faire pivoter les icônes et, lorsqu'elles sont combinées avec les classes de taille précédentes, vous pouvez produire de jolis effets. Voici le code:

Voici le résultat:

Il est facile de faire pivoter les icônes - utilisez le fa-rotation 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. le fa-stack class vous permet de combiner deux ou plusieurs icônes ensemble. Voici le code:

Voici à quoi ça ressemble:

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

CSS personnalisé

Parce que les polices d'icônes sont juste polices, vous pouvez les styler avec CSS comme vous le feriez avec tout autre élément. Utiliser un peu de CSS3 peut aller très loin:

Voici le code HTML pour cette icône:

Voici le CSS:

@ keyframes move from margin-left: 0;  à margin-left: 400px;  .bike nom-animation: move; animation-durée: 4s; 

Ce CSS est assez basique, mais il a un impact important. Ceci n’est pas un tutoriel CSS, vous voudrez peut-être apprendre CSS. sur Internet aujourd'hui, et alors que la plupart des gens admettent connaître un peu le HTML, nous n'avons généralement aucune idée du CSS. La dernière fois que je vous ai présenté… Read More si vous voulez en savoir plus sur le fonctionnement interne.

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

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

Voici le CSS:

Les images clés disparaissent de l'opacité: 0;  à opacité: 1;  .person opacity: 0; nom-animation: fade;  # p1 color: red; animation-durée: 2s;  # p2 color: orange; animation-durée: 4s;  # p3 color: green; animation-durée: 6s;  # p4 animation-duration: 8s; 

Comme dans l'exemple précédent, il utilise des animations CSS3. Une animation appelée se faner 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 Icon Fonts pour animer votre site web! Si vous n'êtes pas encore sûr de vos compétences, consultez ces sites de modèles CSS. 11 Sites de modèles CSS: ne partez pas de rien! 11 Sites de modèles CSS: ne partez pas de rien! Des milliers de modèles CSS gratuits sont disponibles en ligne et s’inscrivent tous dans les tendances et les technologies du design moderne. Vous pouvez les utiliser dans leur forme originale ou les personnaliser pour les personnaliser. Pour en savoir plus, lisez Plus ou ces chaînes YouTube. Voulez-vous apprendre la conception Web? 7 chaînes YouTube pour vous aider à commencer Vous voulez apprendre la conception Web? 7 Des chaînes YouTube pour vous aider à commencer YouTube contient des milliers de vidéos et de chaînes pour les débutants en conception Web. Nous examinons ici quelques-uns des meilleurs pour commencer. Lire plus avec la conception web.

Avez-vous appris quelque chose de nouveau aujourd'hui? Quelle est votre Icon Font préférée? Faites-nous savoir dans les commentaires ci-dessous!

Explorez plus sur: CSS, HTML, Web Design.