Les icônes de plumes sont une collection de polices qui peuvent être utilisées dans les applications et les sites Web. Il propose des icônes graphiques vectorielles évolutives hautement personnalisables en termes d'ombre, de couleur, de taille et de toute autre propriété que CSS peut gérer. Les développeurs et les concepteurs travaillant sur diverses plates-formes peuvent télécharger la collection croissante d'icônes de police de plumes et l'utiliser en fonction de leurs préférences.

Cet article discutera de la méthode pour Utilisez des icônes de plumes dans Html et CSS. De plus, des exemples liés à la procédure spécifiée seront fournis. Alors, commençons!

Note: Avant de vous diriger, assurez-vous que vous avez installé des icônes de plumes. Si vous ne l'avez pas déjà, suivez la section ci-dessous.

Comment installer des icônes de plumes

Il existe différentes méthodes pour installer des icônes de plumes; Cependant, nous avons compilé le plus simple pour que vous intégriez les icônes de plumes en HTML et CSS sans tracas.

Méthode 1: Installation d'icônes de plumes à l'aide de CDN

Réseau de livraison de contenu (Monnaie) donne accès aux fichiers JavaScript utilisés par des personnes du monde entier. Vous pouvez utiliser l'un des liens suivants pour ajouter des icônes de plumes à votre fichier HTML:

OU

Méthode 2: Installation d'icônes de plumes à l'aide de la bibliothèque NPM

"icônes de plumes»Est une bibliothèque NPM utilisée pour intégrer la police de plumes à toute application JavaScript. Si vous souhaitez installer des icônes Feather à l'aide de la bibliothèque NPM, vous devez exécuter cette commande dans le terminal:

NPM Installer Feather-Icons -Save

Méthode 3: Installation d'icônes de plumes en téléchargeant sa collection

Tout d'abord, téléchargez le dossier zippé des icônes de plumes, puis copiez le «Police de caractère/" et "CSS /”Répertoires à votre projet. Ensuite, passez à votre fichier HTML et spécifiez le chemin du chemin du «feathericon.min.CSS«Fichier dans le«" étiqueter:

Comment utiliser des icônes de plumes dans HTML et CSS

Pour démontrer la procédure d'utilisation d'icônes de plumes dans HTML et CSS, nous créerons un nouveau fichier HTML nommé "mon fichier.html”Dans Visual Studio Code:

Dans "mon fichier.html”Fichier, premièrement, nous ajouterons le lien du package d'icône Feather comme source, dans le"" étiqueter:

Ensuite, nous spécifierons les icônes en utilisant «plume de données”Valeur d'attribut dans le étiqueter. Vous pouvez voir sur le code donné, nous utilisons "étoile","carré","cloche", et "décerner”Icônes de plumes dans le fichier html:

Nous utilisons des icônes de plumes dans HTML et CSS

Enfin, nous invoquerons la plume.Remplacer () Méthode pour remplacer les éléments DOM par les icônes de plumes ajoutées:

Voici à quoi ressemble le code complet dans notre "mon fichier.html»:

Ouvrez le fichier dans le navigateur et consultez les icônes de plumes que nous avons utilisées dans le «mon fichier.html" déposer:

À ce stade, vous avez défini la disposition de base des icônes de plumes dans le fichier HTML. Donc, maintenant, si vous souhaitez personnaliser le style des icônes de plumes, vous pouvez effectuer cette opération à l'aide de CSS.

Dans notre "style.CSS»Fichier, nous définirons trois classes pour définir la taille des icônes de plumes:

.Feather-10
Largeur: 10px;
hauteur: 10px;

.Feather-24
Largeur: 24px;
hauteur: 24px;

.Feather-48
Largeur: 48px;
hauteur: 48px;

Pour appliquer ces paramètres à une icône de plumes, vous devez mentionner la classe CSS requise de la manière suivante:

Encore une fois, enregistrez votre fichier HTML, ouvrez-le à votre navigateur préféré et notez la différence dans le style des icônes des plumes:

Il s'agissait de l'utilisation de base des icônes de plumes dans HTML et CSS. Pour explorer davantage, consultez la documentation des icônes de plumes.

Conclusion

Pour utiliser des icônes de plumes dans HTML et CSS, vous devez les installer d'abord en utilisant CDN, NPM Library, ou en téléchargeant ses fichiers connexes à partir du site officiel. Après avoir installé des icônes de plumes, vous pouvez intégrer sa belle collection d'icônes et les style selon vos préférences en utilisant CSS. Cet article a discuté de la méthode pour utiliser des icônes de plumes dans HTML et CSS. De plus, des exemples liés à la procédure spécifiée sont également fournis.