Comment ajouter des icônes impressionnantes de police dans HTML & CSS?
Les icônes impressionnantes de la police qui sont basées sur CSS et moins, sont l'une des options parmi la gamme série d'icônes qui peuvent être intégrées dans votre site Web. Explorons comment les ajouter dans votre page Web.
Comment ajouter des icônes impressionnantes de police?
Il existe deux façons d'ajouter une édition gratuite d'icônes de Font Awesome dans votre page Web HTML qui sont:
Chargez la bibliothèque
La première approche pour ajouter une icône impressionnante de police dans votre site Web est d'ajouter la bibliothèque impressionnante de police dans la section de votre fichier HTML. Par exemple, dans la syntaxe suivante, la police impressionnante de la police de la version 4.7.0 est ajouté dans la section.
Les bibliothèques d'autres versions impressionnantes sont disponibles en ligne.
Obtenir le code du kit
La deuxième approche pour ajouter une icône impressionnante de police dans votre page Web est de créer un compte sur Font Awesome Official Site Web pour recevoir un code du nom «Kit Code». Ce code peut être utilisé lors de l'insertion d'une police géniale dans votre page Web. Une fois que vous obtenez le code du kit, ajoutez le lien dans l'attribut SRC de la balise…
Lors de la réception du code du kit, insérez-le à la place de «Kitcode» dans le lien et continuez. Par exemple.
Exemple
Supposons que vous souhaitez insérer une icône de la caméra en utilisant l'approche du code du kit. Pour ce faire, considérez l'extrait de code suivant:
Note: Des icônes impressionnantes de police sont ajoutées ou éléments.
Le préfixe FA est utilisé pour ajouter des icônes impressionnantes avec le nom de l'icône. Les nouvelles versions de Font Awesome utilisent également des préfixes comme Fas (pour le mode solide) et FAR (pour le mode régulier).
Sortir
L'icône de caméra impressionnante de police a réussi à insérer.
La démonstration ci-dessous montre la différence entre les préfixes Fas et Far.
Sortir
L'icône de cloche impressionnante de police (mode solide et mode régulier) a réussi à intégrer.
Maintenant que nous savons comment insérer une icône impressionnante de police sur la page Web, voyons comment redimensionner la police impressionnante icônes.
Redimensionner la police impressionnante icônes
Il y a un total de 13 classes qui sont utilisées pour modifier la taille des icônes impressionnantes de police et ces classes sont; FA-XS, FA-SM, FA-LG, FA-2X, FA-3X, FA-4X, FA-5X, FA-6X, FA-7X, FA-8X, FA-9X et FA-10X.
Exemple
Cet exemple démontre quelques-unes des classes mentionnées ci-dessus.
Sortir
L'icône de cloche impressionnante de police avec différentes tailles est insérée dans la page Web.
En savoir plus sur les icônes impressionnantes de police!
Ici, nous avons répertorié quelques éléments qui peuvent être faits pour faire polissez des icônes impressionnantes pour améliorer l'expérience utilisateur.
Icônes impressionnantes de police animée
Vous pouvez animer des icônes impressionnantes de police en utilisant les classes mentionnées ci-dessous.
fa-spin: Il est utilisé pour faire pivoter une icône.
FA-Pulse: Il est également utilisé pour faire pivoter une icône mais avec 8 étapes.
Exemple
Cet exemple démontre les classes susmentionnées.
Sortir
Les icônes Sync-Alt et Spinner sont animées à l'aide de classes FA-Spin et FA-Pulse.
Font Icônes répertoriées impressionnantes
Vous pouvez remplacer les balles ordinaires en utilisant les classes FA-UL et FA-LI.
Exemple
Les classes mentionnées ci-dessus sont démontrées ici.
- Objet 1
- Article 2
- Article 3
Sortir
Les icônes répertoriées impressionnantes sont intégrées dans la page Web HTML.
Icônes impressionnantes de la police tournante et tourbillonne
Vous pouvez faire pivoter et retourner les icônes impressionnantes de la police en utilisant des classes FA-Rotate- * et Fa-Flip- *.
Exemple
L'exemple ci-dessous montre comment faire pivoter des icônes impressionnantes de la police et de la police.
Sortir
L'icône impressionnante de la police de voiture est en cours de rotation et de retournement sous différents angles.
Icônes impressionnantes de police d'empilement
Vous pouvez empiler des icônes impressionnantes de police en utilisant les classes suivantes.
FA-Stack: il est utilisé pour l'icône considérée comme un parent dans la pile.
FA-Stack-1x: il est utilisé pour l'icône avec la taille régulière de la pile.
FA-Stack-2x: il est utilisé pour l'icône avec la plus grande taille de la pile
FA-inverse: il est utilisé pour changer la couleur d'une icône dans la pile.
Exemple
Cet exemple est une démonstration d'icônes impressionnantes de police empilée.
Sortir
L'icône de banque impressionnante de police empilée avec succès sur la police impressionnante icône de voiture.
Icônes impressionnantes de police bordées et tirées
Vous pouvez ajouter des frontières et tirer des icônes impressionnantes de police en utilisant des classes; Classes FA-FA-FA-FA-Pull-droite et FA-Pull-gauche.
Exemple
Ici, les cours de frontière et d'icônes tirés sont illustrés.
Les icônes sont un moyen de démontrer une action ou un objet visuellement. Ceux-ci sont considérés comme très importants dans une conception Web afin d'attirer l'attention des utilisateurs. En plus de cela, les icônes améliorent l'apparence d'un site Web, offrent une navigation facile et augmentent l'expérience utilisateur. Les icônes impressionnantes de la police qui sont basées sur CSS et moins, sont l'une des options parmi la gamme série d'icônes qui peuvent être intégrées dans votre site Web.
Sortir
Une citation a été tirée avec succès à gauche avec une bordure.
Conclusion
Les icônes impressionnantes de police peuvent être intégrées dans votre site Web en recevant un code de kit sur le site Web officiel de Font Awesome. Il existe différentes classes disponibles pour redimensionner les icônes impressionnantes de la police, en outre, vous pouvez faire plusieurs choses avec ces icônes, telles que l'animation des icônes impressionnantes de police, les utiliser au lieu de balles ordinaires dans une liste, tourner et retourner ces icônes, etc. Ceci et bien plus encore sur les icônes impressionnantes de police sont discutées dans cet article avec l'aide d'exemples appropriés.