Comment utiliser les icônes Google dans HTML & CSS?

Les icônes sont des représentations visuelles de différentes actions, programmes ou fichiers et peuvent jouer un rôle très important dans la conception du site Web. Ils peuvent améliorer l'apparence globale du site Web et s'avérer une bonne source d'attirer plus d'audience sur votre site Web. Les icônes offrent une navigation facile, ce qui augmente l'expérience utilisateur. Il existe une vaste gamme d'icônes que vous pouvez ajouter à votre site Web, cependant, cet article est conçu pour vous guider sur la façon d'utiliser les icônes Google dans HTML & CSS.

Les sujets explorés dans cet article sont:

1. Que sont les icônes Google?
2. Comment ajouter une icône Google?
3. Redimensionner une icône Google
4. Modification de la couleur d'une icône Google

Commençons.

Que sont les icônes Google?

Google fournit une grande variété d'icônes (un total de 750) qui sont considérées comme des icônes de conception de matériaux. Ces icônes sont simples mais modernes et représentent des actions ou des objets couramment utilisés. Par exemple, une icône de la poubelle à poussière représente l'action «Supprimer». Ces icônes sont soutenues par tous les navigateurs actuels. La capture d'écran ci-dessous montre certaines des icônes de conception de matériaux.

Maintenant que nous savons ce que sont les icônes Google, apprenons à les ajouter aux pages Web.

Comment ajouter une icône Google?

Dans le but d'ajouter des icônes de conception de matériaux Google à vos sites Web, suivez les étapes mentionnées ci-dessous.

Étape 1
La première étape consiste à ajouter le lien de la bibliothèque de polices Material-Icons dans la section de votre fichier HTML. Voici comment tu fais.

Étape 2
Une fois que vous avez ajouté le lien de la bibliothèque des icônes de matériaux, l'étape suivante consiste à ajouter la classe «ICons matériaux» dans le ou tag de la section et ajoutez également le nom de l'icône.

Wifi

Exemple 1
Dans cet exemple, une icône de paramètres est ajoutée dans la page Web.

paramètres

Sortir

Icône des paramètres ajout avec succès.

Exemple 2
Dans l'exemple ci-dessous, une icône de déconnexion est ajoutée dans la page Web.

Se déconnecter

Sortir

Icône de déconnexion avec succès inséré.

Vous pouvez également modifier la taille de ces icônes de conception de matériaux à l'aide de CSS. Explorons-le en détail.

Redimensionner une icône Google

Vous pouvez modifier la taille des icônes de conception de matériaux Google en fonction de votre désir en utilisant CSS. Suivez les étapes mentionnées dans cette section afin de redimensionner votre icône Google Material Design.

Étape 1
Dans la balise en utilisant la classe de matériaux-Icons définissez la taille de l'icône, par exemple.

Étape 2
Utilisez la même classe dans le Tag avec le nom de l'icône.

paramètres

Sortir

La taille de l'icône des paramètres a changé avec succès.

Outre la taille, vous pouvez également modifier la couleur des icônes Google. Voyons comment c'est fait.

Modification de la couleur Une icône Google

Dans le but de modifier la couleur des icônes de conception de matériaux Google, suivez les mêmes étapes que celles mentionnées dans la section ci-dessus avec une légère différence qui, avec la taille de police, vous pouvez définir la couleur à l'aide de la propriété de couleur de CSS.

Exemple
Supposons que vous souhaitez modifier la couleur de l'icône des paramètres en bleu.

paramètres

Sortir

La couleur de l'icône des paramètres a changé avec succès.

Conclusion

Pour intégrer des icônes Google dans vos pages Web HTML, vous devez ajouter le lien de la bibliothèque de polices de matériaux-icons dans la section de votre fichier HTML, puis ajouter les icônes de matériaux de classe dans le ou tag de la section avec le nom de l'icône. Vous pouvez également modifier la taille et la couleur des icônes via CSS en les définissant dans l'étiquette en utilisant la classe de matériaux-icons. Cet article explique comment utiliser les icônes Google dans HTML & CSS en profondeur à l'aide d'exemples appropriés.