Les développeurs Web sont très habitués à utiliser des icônes pour représenter une action spécifique ou l'icône peut représenter graphiquement n'importe quelle commande ou action ou un indicateur sur une page Web. Les icônes sont utilisées dans les documents ainsi que dans les applications et peuvent être sélectionnables ou non sélectionnables.
Par exemple, les images que l'on voit sur les boutons d'une application sont toutes des icônes et ces boutons peuvent être sélectionnés.
Pour faciliter la conception et la programmation de sites Web, certaines bibliothèques d'icônes de polices ont été développées, c'est-à-dire des icônes pouvant être insérées comme s'il s'agissait de texte et disponibles pour être utilisées dans les pages HTML d'un site Web, ce qui permet d'économiser beaucoup de travail pour les utilisateurs, les concepteurs et les programmeurs.
Dans ce didacticiel, nous examinerons certaines bibliothèques telles que Font Awesome, Bootstrap Glyphicons et Material Design Google, qui sont des bibliothèques avec des polices d'icônes prédéfinies souvent utilisées par les développeurs Web.
Font Awesome Tools et bibliothèque
Font Awesome est une bibliothèque de polices qui rend les icônes à l'aide d'un ensemble d'outils CSS. Cet outil est développé pour être utilisé avec Twitter Bootstrap, mais peut être utilisé individuellement comme feuilles de style sur n'importe quel site Web.
L'avantage d'être une bibliothèque CSS est qu'elle fonctionne sur n'importe quel navigateur et appareil et s'adapte même à n'importe quelle résolution d'écran.
Vous pouvez télécharger la bibliothèque sur le site Web de Font Awesome. Une autre option consiste à utiliser le lien direct vers la bibliothèque :
Voyons un exemple de comment implémenter des icônes pour les réseaux sociaux avec Font Awesome, nous créons un fichier html et ajoutons le code suivant :
Font Awesome - Icônes de médias sociaux
Chaque icône est représentée par une classe fa-icon donc par exemple l'icône pour YouTube sera fa-youtube, le résultat lors de l'affichage dans le navigateur sera le suivant :
Ensuite, nous pouvons ajouter nos propres classes CSS ou modifier celle prédéfinie pour l'adapter à notre conception, par exemple entre les balises head, nous ajoutons le code CSS suivant.
Décoration d'icône via CSS
Ensuite, nous exécutons dans le navigateur et le résultat sera le suivant :
Nous pouvons voir que nous avons appliqué du CSS à chaque icône et que nous n'avons ajouté aucune image. Une autre option pour améliorer la visibilité consiste à modifier le classe de survol, c'est-à-dire que lorsque la souris survole une icône, modifiez la couleur de la lettre.
Pour ce faire, nous changeons la couleur dans la ligne suivante :
.social-icons .fa: hover {color: green; } Le résultat lors du survol d'une icône sera le suivant :
Nous pouvons également le faire avec l'arrière-plan de chaque icône, en changeant la propriété d'arrière-plan pour une couleur que nous aimons.
Toutes les icônes disponibles sont visibles sur le site Web de Font Awesome, les icônes sont organisées par catégories.
L'utilisation de ce type de police d'icônes pour nos conceptions Web nous permet d'accélérer le chargement de la page car nous n'avons pas besoin d'images et d'offrir une qualité supérieure (en particulier sur les appareils mobiles lors du zoom)
Outils et bibliothèque d'amorçage Glyphicons
Glyphicons Bootstrap est une bibliothèque d'icônes de polices. Il offre une grande variété d'icônes au format de police. Ces icônes sont gratuites et vous pouvez également étendre la bibliothèque avec des icônes payantes. Les icônes gratuites peuvent être utilisées dans des projets de conception Web sans avoir à les acheter. Cette bibliothèque est orientée vers les icônes des boutons qui remplissent certaines fonctions telles que l'impression, la recherche, l'enregistrement, etc.
Cette bibliothèque est incluse sous forme de feuilles de style dans Bootstrap, pour l'utiliser, nous pouvons télécharger Bootstrap à partir de sa page officielle ou utiliser le lien suivant :
On peut aussi voir les icônes par catégories sur la page Glyphicons.
Voyons ensuite un exemple dans lequel nous utilisons cette bibliothèque pour les icônes des boutons et les éléments de saisie de données pour un formulaire :
Bootstrap Glyphicon - BoutonsNous avons testé sur un appareil mobile à quoi cela ressemblerait :Bootstrap Glyphicon - Boutons
Rechercher Imprimer Connexion Acheter
Nous appliquons l'icône de liste à une sélection
Voitures Motos
L'avantage d'utiliser des icônes de police ou des icônes de police est que cela évite d'avoir à invoquer une image ou une icône puisque les images sont au format svg dans le fichier css de la bibliothèque et que ces images sont évolutives.
Une bibliothèque complète peut faire entre 10 Ko et 40 Ko, ce qui augmente la vitesse de chargement du site Web.
Les icônes sont du texte donc nous pouvons les manipuler avec CSS et il répondra à tout événement que nous programmons avec Jquery.
Si dans la propriété CSS Font nous indiquons une taille de police dans em par exemple, font-size : 4em l'icône sera responsive et s'adaptera à n'importe quel appareil. Ils peuvent également être utilisés pour programmer des applications responsives avec des frameworks comme vu dans le tutoriel, programmer des applications mobiles avec Ionic Framework, ces icônes sont également utilisées.
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
