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

Publicité

Vous avez entendu parler d'icônes et vous avez certainement entendu parler de polices, mais qu'est-ce qu'un Police de l'icône? 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ônes?

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. Vous pouvez être confus par cela, car à quoi sert une police si vous ne pouvez pas écrire de lettres à votre maman!

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 5 étapes pour apprendre le CSS et devenir un sorcier Kick-Ass CSSLe CSS est le changement le plus important des pages Web au cours de la dernière décennie, et il a ouvert la voie à la séparation du style et du contenu. De façon moderne, XHTML définit la structure sémantique ...

Lire la suite . Cela offre un énorme avantage sur les 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

Je vais utiliser Police Awesome pour ces exemples, mais la théorie peut être appliquée à de nombreux autres packs de polices.

Voici le 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 Comment faire un site web.

La ligne la plus importante est la suivante:

Cela charge la feuille de style Font Awesome 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 à je Mots clés. Celles-ci ont été choisies car elles n’ont pas de navigateur ou de style défini par défaut, donc vos icônes ne seront pas toutes gâchées. Vous pouvez également ajouter les classes à envergure balises, mais cela encombre votre HTML.

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

 Ma première icône

Voici à quoi cela ressemble:

C'était facile? Décomposons-le. Il y a deux classes nécessaires pour que Font Awesome fonctionne. Le premier s'appelle FA, qui signifie Font Awesome. Cela est nécessaire pour n'importe quelle 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 tous les icônes dans Font Awesome sur leur site Web.

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

Aller plus loin

Une fois que vous connaissez les bases, il est temps pour 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 vous fera faire pivoter les icônes, et lorsqu'il est combiné avec les classes de taille précédentes, vous pouvez produire de beaux effets. Voici le code:

Voici le résultat:

Il est facile de faire pivoter les icônes - utilisez le fa-tourner 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 La classe 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 juste polices, vous pouvez les styliser avec CSS comme vous le feriez pour tout 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 se déplace {de {margin-left: 0; } à {margin-left: 400px; } } .bike {nom-animation: move; durée de l'animation: 4s; }

Ce CSS est assez basique, mais il a un impact important. Ce n'est pas un tutoriel CSS cependant, vous voudrez peut-être apprendre CSS 10 exemples de code CSS simples que vous pouvez apprendre en 10 minutesVous voulez en savoir plus sur l'utilisation de CSS? Essayez ces exemples de code CSS de base pour commencer, puis appliquez-les à vos propres pages Web. Lire la suite 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 HTML:

Voici le CSS:

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

Comme l'exemple précédent, cela utilise des animations CSS3. Une animation appelée s'estomper est créé, et chaque icône de personne implémente cette animation avec un timing variable. Il y a beaucoup de potentiel à 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 11 sites de modèles CSS: ne commencez pas à zéro!Il existe des milliers de modèles CSS gratuits disponibles en ligne, tous embrassant les tendances et technologies de conception modernes. Vous pouvez les utiliser dans leur forme d'origine ou les personnaliser pour les personnaliser. Lire la suite , ou ces Chaînes YouTube pour commencer Vous voulez apprendre la conception Web? 7 chaînes YouTube pour vous aider à démarrerYouTube a des milliers de vidéos et de chaînes pour les débutants en conception Web. Ici, nous examinons certains des meilleurs pour commencer. Lire la suite avec la conception web.

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