La police d’icônes est une tendance que suivent de plus en plus de développeurs. Si vous n’êtes pas encore dans le sujet, alors cet article est fait pour vous. Tout d’abord, nous examinerons les avantages et les inconvénients de cette approche. Nous comparerons ensuite deux jeux de polices d’icônes populaires et examinerons différents exemples.

Qu’est-ce qu’une police d’icônes ?

La police de l'icône est la même police. Cependant, au lieu de lettres et de chiffres, ils contiennent des symboles et des caractères spéciaux. Vous pouvez les styliser en utilisant CSS comme vous le faites avec du texte normal.

Avantages et inconvénients

Le remplacement des images raster par des polices d'icônes présente de nombreux avantages. En voici quelques uns:

• conception via CSS ;
• leur nature vectorielle leur permet d'être facilement mis à l'échelle à n'importe quelle taille sans perte de qualité ;
• une requête HTTP au lieu de plusieurs, contrairement aux images raster ;
• Large prise en charge des navigateurs, y compris IE6.

Cela signifie-t-il que les polices d’icônes sont une panacée ? Non bien sûr que non. Il s'agit d'une excellente technique que vous pouvez utiliser dans votre projet de conception, mais son utilisation présente quelques inconvénients. Par exemple, si vous souhaitez afficher une image complexe plutôt qu’une simple icône, une police d’icône n’est pas la meilleure solution.

De plus, en règle générale, ils ne peuvent être affichés que dans une seule couleur, à moins que vous n'utilisiez des astuces CSS. De plus, certaines icônes peuvent être créées pour des tailles spécifiques, telles que 16x16, 32x32, 48x48, etc. Si, pour une raison quelconque, vous modifiez la taille en 25x25, le résultat risque de ne pas être clair.

Il convient de noter qu’en plus des polices d’icônes, il existe une autre solution populaire : SVG. Leur utilisation peut résoudre certains problèmes. Par exemple, vous pouvez utiliser plusieurs couleurs.

Nous examinerons également quatre exemples différents d’utilisation de polices d’icônes.

Police géniale

Font Awesome est une bibliothèque contenant 439 icônes. Il est entièrement gratuit pour un usage personnel et commercial. Il a été initialement développé pour Bootstrap, mais vous pouvez l'utiliser séparément.

Travailler avec Font Awesome

Le moyen le plus simple de connecter Font Awesome est de se connecter via CDN. Si vous travaillez hors ligne, vous devrez télécharger un ensemble d'icônes.

Vous devez également inclure du CSS et des polices générées dans différents formats.

Pour utiliser des icônes, vous devez les placer à l’intérieur d’un élément span ou i. Ensuite, vous devez leur attribuer deux classes : fa plus une deuxième classe qui doit correspondre au nom de l'icône, par exemple fa-home. vous pouvez trouver les noms de toutes les icônes disponibles.

Plus d’informations et de nombreux exemples peuvent être trouvés sur cette page.

Voyons maintenant quelques exemples.

Police géniale. Exemple 1

Dans le premier exemple, nous créons un menu vertical. Nous plaçons d’abord les icônes à l’intérieur de l’élément i et doublons leur taille en utilisant la classe prédéfinie fa-2x. Ensuite, nous les stylisons en utilisant CSS.

Le HTML ressemblera à ceci :

Et voici le CSS :

Nav li ( arrière-plan : #ededed ; hauteur : 80px ; largeur : 80px ; hauteur de ligne : 80px ; alignement du texte : centre ; ) nav li:not(:first-child) ( margin-top : 1px; ) nav li a ( contour : aucun ; position : relative ; largeur : 100 % ; hauteur : 100 % ; ) nav i ( couleur : bleu acier ; alignement vertical : milieu ; ) nav li a:after ( arrière-plan : #ededed ; contenu : attr (données -name); affichage : aucun ; marge gauche : 1 px ; largeur : 160 px ; hauteur : 80 px ; gauche : 80 px ; position : absolue ; taille de police : 1,2 em; ) nav li a:hover:after ( display : inline- bloc; )

Police géniale. Exemple n°2

Dans l'exemple suivant, nous allons créer un simple widget social. Placez à nouveau les icônes à l'intérieur de l'élément i et doublez leur taille. Ensuite, nous le stylisons en utilisant CSS.

Le code HTML d'une seule icône ressemblerait à ceci :

CSS pour styliser les icônes :

Section a (remplissage : 7 px ; couleur : noir ; ) section i (alignement vertical : milieu ; transition : couleur .3s facilité d'entrée-sortie ; ) section a:nth-child(1):hover i (couleur : #3b5998 ; )

Police géniale. Exemple n°3

Dans le troisième exemple, nous utilisons des icônes pour le formulaire de connexion. Nous utilisons une autre classe fa-fx prédéfinie pour définir une largeur fixe (environ 1,25em).

HTML et CSS sont similaires aux précédents. Résultat .

Faites attention aux icônes sur le formulaire, ainsi qu'aux liens sociaux.

Icônes IcoMoon

IcoMoon est une autre police d’icônes populaire. Cette fois, nous pouvons choisir parmi deux packages : l’un open source et l’autre premium. Des informations plus détaillées peuvent être trouvées. Selon le forfait sélectionné, le nombre et le format des icônes disponibles diffèrent. Par exemple, le package gratuit contient 450 icônes, le package payant en contient 1266.

Conclusion

Code CSS et exemples d'utilisation de cette police d'icônes "Font Awesome". Ci-dessous vous voyez le code CSS lui-même et un tableau avec des exemples de classes, de contenu (content:"") et le résultat.

Polices d'icônes géniales

Connexion de police :

Ajoutez le fichier CSS de la police nécessaire (selon la version).
Si la structure de votre site (application) a une structure de fichiers différente (les fichiers sont dans des dossiers différents), alors modifiez tous les chemins vers vos chemins (par exemple : /assets/css/).
Si vous ne comprenez pas de quoi nous parlons, partez. Appuyez ensuite sur les raccourcis clavier Ctrl+U ou faites un clic droit sur une zone vide de la page > Code Source de la Page / Texte Source de la Page (quelque chose comme ceci devrait être écrit dans le menu contextuel).
Par exemple, vous pouvez connecter la police FA comme ceci :

Ce code connectera la version maximale de la police avec toutes les icônes

Déposez également dans ce dossier /css/fonts/ le dossier de l'archive _site-89_fontawesome-pro-5.8.2.zip/fontawesome-pro-5.8.2-web.zip/ polices Web
Ajoutez ce code à votre page ou fichier CSS afin de pouvoir utiliser facilement la police FA ( , MAIS NON ), (font-family:"Font Awesome 5 Pro", "Font Awesome 5 Brands"; parler: aucun; style de police: normal; poids de police: normal; variante de police: normal; transformation de texte: aucun; ligne -hauteur : 1 ;-webkit-font-smoothing :anticrénelé ;-moz-osx-font-smoothing :niveaux de gris)

Comment utiliser les polices d'icônes ?

Par exemple, vous pouvez utiliser l'importation de code CSS. Téléchargez et placez les fichiers de polices sur votre serveur. Connectez-les ensuite à l’un des fichiers CSS connectés à la page souhaitée. Le code de connexion est disponible ci-dessus. Après cela, vous pouvez écrire le code suivant, par exemple :

Il s'avérera :

Télécharger un fichier

Comme vous pouvez le constater, tout est très simple. C'est pourquoi nous avons créé cette page afin que vous puissiez voir immédiatement le code CSS, le code html et le résultat final, afin de ne pas utiliser de logiciel supplémentaire. Si vous ne souhaitez pas charger tout le code CSS, vous pouvez simplement importer la police et créer vos propres classes.

Fa-star-o:avant(content:"\f006";) Icônes de 1986

CDN Font Awesome est le moyen le plus simple de commencer à utiliser Font Awesome sur votre site ou votre application, et avec une seule ligne de code. Pas besoin de télécharger ou d'installer quoi que ce soit.

Nous créons chaque ensemble d'icônes individuellement pour chaque site, ce qui vous permettra de changer d'icône rapidement et sans tracas inutiles. De plus, grâce à cette adresse e-mail, nous pouvons identifier quel ensemble d'icônes vous appartient, ce qui signifie que vous pouvez gérer vos ensembles.

Icônes pour le site. Rapide.

Vous n'avez pas à perdre de temps sur les fichiers sur votre serveur. Vous obtiendrez les 675 icônes ainsi que les ensembles de styles, tous optimisés pour un chargement rapide.

Mises à jour faciles

Étant donné que chaque site aura un ensemble unique d'icônes, vous pouvez facilement le mettre à jour sans aucune modification du code. Merveilleux =).

Ou

Personnalisation avancée Facile

Utiliser CSS

1. Collez le code suivant dans la balise dans le code HTML de votre site Web.

   "chemin/vers/font-awesome/css/font-awesome.min.css">

2. Voir des exemples

Utiliser Sass ou moins

Utilisez cette méthode pour personnaliser Font Awesome 4.7.0 en utilisant LESS ou SASS.

1. Copiez l'intégralité du dossier font-awesome dans votre dossier de projet.
2. Dans votre projet, ouvrez les fichiers font-awesome/less/variables.less ou font-awesome/scss/_variables.scss et modifiez respectivement @fa-font-path ou $fa-font-path pour pointer vers le dossier contenant les polices.

   @fa-font-path : "../font" ;

   Le chemin d'accès au dossier des polices doit être relatif au dossier CSS compilé.

3. Compilez vos fichiers LESS ou SASS à l'aide d'un compilateur. Tout devrait fonctionner.
4. Consultez les exemples pour démarrer avec Font Awesome !

Ou

Niveau avancé Pro

1. Ajoutez cette ligne au Gemfile de votre application :

   joyau "sans police géniale"

2. Prochaine exécution :

   $bundle

3. Ou installez manuellement :

   $ gem installe sans police

Si vous utilisez Rails, collez par exemple le code ci-dessous dans le fichier application.less :

1. Ajoutez la ligne suivante au Gemfile de votre projet :

   joyau "font-awesome-sass"

2. Prochaine exécution :

   $bundle

3. Ou installez manuellement :

   $ gem installer font-awesome-sass

Si vous utilisez Rails, collez par exemple le code ci-dessous dans le fichier application.scss :

@import "font-awesome-sprockets" ; @import "font-awesome" ;

Informations Complémentaires

Validateurs

Afin de fournir les meilleurs résultats dans les navigateurs plus anciens et défectueux, Font Awesome utilise dans certains cas des hacks CSS pour contourner les problèmes et les bugs des navigateurs. Naturellement, ces hacks provoquent des avertissements lorsque le code est vérifié dans les validateurs. De plus, Font Awesome utilise de nouvelles propriétés CSS dans plusieurs situations qui ne sont pas encore entièrement standardisées, mais sont utilisées uniquement à des fins d'amélioration progressive.

En pratique, ces avertissements du validateur ne sont pas pertinents, car la plupart des CSS fonctionnent sans hacks et, par conséquent, ils ne contribuent pas aux domaines où ils ne sont pas utilisés. C'est en fait pourquoi nous ignorons ces avertissements.

Internet Explorer 8 et @font-face

IE8 a plusieurs problèmes avec @font-face lorsqu'il est utilisé conjointement avec le pseudo-élément :before. Font Awesome utilise exactement une telle combinaison. Si la page est mise en cache ou chargée sans que le curseur de la souris survole la fenêtre du navigateur (par exemple, lorsque vous cliquez sur le bouton « Actualiser » ou chargez du contenu via un cadre), alors la page sera générée avant le chargement de la police. Passer la souris sur la page (corps) devrait afficher certaines icônes, survoler le reste des icônes déchargées les réanimera également. ce problème.

Vous souhaitez rendre votre site internet encore plus attractif ? Les icônes de police aideront à décorer vos publications, pages ou menus. Et quand il s’agit d’icônes de polices, nous ne pouvons nous empêcher de nous souvenir de Font Awesome.

Si vous souhaitez ajouter une grande collection d’icônes Font Awesome à votre site WordPress, lisez la suite pour découvrir deux façons rapides et faciles de les ajouter à WordPress.

Que sont les icônes Font Awesome et en quoi sont-elles utiles ?

add_action("wp_enqueue_scripts", "enqueue_load_fa"); fonction enqueue_load_fa() ( wp_enqueue_style("load-fa", "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); )

Insertion d'icônes Font Awesome

Une fois que vous avez ajouté le code à votre thème, vous êtes prêt à commencer à utiliser les icônes Font Awesome partout.

Vous pouvez trouver une liste complète des icônes sur Site Web génial de police.

Par exemple, si vous recherchez l'icône « Télécharger », saisissez simplement « télécharger » dans la recherche et sélectionnez parmi les options disponibles :

Après avoir sélectionné l'icône que vous aimez, vous pouvez voir un écran avec différentes tailles de cette icône. Au centre de l'écran, vous devriez remarquer un petit bloc de code :

Vous devez copier l'intégralité du code de l'icône sélectionnée. Ensuite, vous pouvez coller ce code n’importe où dans WordPress, quel que soit l’éditeur que vous utilisez. Assurez-vous simplement de le coller pendant que l'éditeur est en mode "Texte":

Vous pouvez revenir à l'onglet visuel une fois que vous avez fini d'intégrer le code. Après avoir publié un article, vous verrez votre icône dans le frontend :

Comment augmenter la taille d'une icône Font Awesome

Comme vous pouvez le voir dans l’exemple ci-dessus, les icônes sont assez petites. Si vous devez les augmenter, vous devez ajouter quelques lignes de code. Par exemple, pour doubler la taille de vos icônes, vous ajouteriez « fa-2x » à la classe d'icônes.

Par exemple, voici le code initial de l'icône :

Et voici le code avec l'icône agrandie 2 fois :

Dans la vraie vie, l'icône ressemblera désormais à ceci :

Voici une liste de morceaux de code que vous devez ajouter pour modifier la taille :

• fa-lg – augmentation de 33%
• fa-2x – augmenter 2 fois
• fa-3x – augmenter 3 fois
• fa-4x – …
• fa-5x – ... eh bien, vous voyez l'idée !

Vous pouvez également faire d'autres choses intéressantes, comme utiliser l'icône Font Awesome comme puce, ajouter des animations et bien plus encore. Sur le site officiel de Font Awesome, vous pouvez trouver des instructions sur la façon de modifier les icônes de police.

2. Comment ajouter Font Awesome à WordPress à l'aide d'un plugin

Si vous n'aimez pas la méthode précédente, vous pouvez installer le plugin. Il existe de nombreux plugins différents où cette fonctionnalité est disponible, mais l'un des plus populaires est Better Font Awesome :

Vous pouvez essayer d’autres plugins, mais nous pensons que celui-ci est le meilleur pour plusieurs raisons :

• Il est mis à jour régulièrement. Ceci est important car plusieurs plugins Font Awesome populaires n’ont pas été mis à jour depuis des années.
• Importe automatiquement un nouvel ensemble d’icônes Font Awesome.
• Vous permet d'ajouter des icônes via un shortcode ou le même code que nous avons utilisé.

Pour commencer, installez et activez le plugin.

Il ajoutera une nouvelle section de menu Paramètres → Meilleure police géniale dans votre console. Vous n'avez rien à configurer, suivez simplement les instructions fournies par le plugin :

Ajout d'icônes

Pour ajouter des icônes aux publications, vous pouvez utiliser la même méthode que celle que nous vous avons montrée dans la version manuelle ou utiliser un shortcode. L'avantage d'utiliser un shortcode est que vous n'avez pas besoin de changer l'onglet "Texte" dans votre éditeur.

Le format de shortcode dont vous avez besoin est :

Où NAME est le nom de l'icône sur le site Web Font Awesome :

Vous pouvez ajouter ce shortcode au module Divi ou à votre éditeur de texte WordPress habituel. Voici un exemple où nous avons ajouté une icône via un shortcode à un module de texte tout en utilisant Divi Visual Builder :

Visual Builder l'affiche comme ceci :

Vous pouvez utiliser le même shortcode dans l’éditeur WordPress standard.

Si vous souhaitez modifier la taille de votre icône à l'aide d'un shortcode, ajoutez simplement une balise de classe avec la taille de l'icône :

Résultats

C'est tout! Deux façons différentes d’ajouter des icônes vectorielles Font Awesome à votre site WordPress. Nous préférons la méthode manuelle car elle prend moins de temps et vous n'avez pas à craindre de casser le plugin plus tard.

Mais si vous ne souhaitez pas toucher au code du thème, alors il est préférable d'utiliser le plugin Better Font Awesome.

Maintenant vous! Utilisez-vous Font Awesome ?

Dans cet article, je vais vous expliquer aussi simplement et clairement que possible ce qu'est la police d'icônes Font Awesome, comment l'installer et vous expliquer plusieurs exemples d'utilisation.

Qu’est-ce que la police Font Awesome ?

La police Awesome est nécessaire pour utiliser des icônes sans télécharger d'images (collections d'icônes, etc.) sur le site. Cette police (en version 4.1) comprend 441 icônes, qui deviennent disponibles lorsque vous appliquez une classe d'icônes spécifique à un élément. Mais plus là-dessus plus tard. Ci-dessous vous pouvez voir une petite partie d'exemples d'icônes :

Avantages de la police
- Gratuitement
- Accès facile via CSS
- 441 icônes (en version 4.1)
- Fonctionne dans IE
- Évolutivité
- S'affiche parfaitement dans les liseuses électroniques et les i-appareils !
- De nombreux designers ont déjà apprécié et utilisent la police !

Comment installer la police Font Awesome (avec icônes) ?

1. Téléchargez la police depuis le site http://fontawesome.io/. Il pèse un peu, environ 400 Ko.

2. Copiez les fichiers décompressésà votre projet (par exemple, où se trouve le fichier d'index). Les noms des fichiers ne correspondront probablement pas à ceux existants, car leurs noms sont assez spécifiques.

3. Connectez les fichiers en tête de votre projet. J'offre deux options - s'il se trouve plus haut dans le répertoire et s'il se trouve dans un seul.

4. Utilisez une police. Voir l'exemple ci-dessous :

Icône de photo
Icône de vérification

Exemples de polices Font Awesome

Disons que nous travaillons sur certaines actions selon la liste :

• Prêt


• Prêt


• Chargement


• Attente

Icônes d'attente :

Citation:

Quel dommage que ce ne soit pas donné
Il est temps pour nous de comprendre
Qui peut-on trouver ?
Et avec qui perdre...
Faites pivoter les icônes :

normale
fa-rotation-90
fa-rotation-180
fa-rotation-270
fa-retournement-horizontal
icône-retourner-vertical