Font Awesome 6: Revue complète
- 1 Comment installer la police géniale
- Méthode 1.
- Méthode 2.
- 2 Comment utiliser des icônes impressionnantes de police
- 1 icônes standard
- 2 grandes icônes
- 3 icônes de largeur fixe
- 4 icônes pour la liste à puces
- 5 icônes et citations encadrées
- 6 icônes animées
- 7 icônes transformées
- 8 icônes combinées
- 3 Font Awesome 4.5.0 collection, classes etcss code to insert using the content property
- 4 ressources connexes
- Taille de l'icône
- Couleur icône
- Questions Fréquemment Posées
Font Awesome est une collection d'icônes vectorielles évolutives. Les icônes peuvent être formatées à l'aide des propriétés CSS, définissent leur couleur, leur taille, leur ombre et bien plus encore. La version 5.5.0 de la police comprend 605 icônes.
1 Comment installer la police géniale
Méthode 1.
Utilisez la version Font-Awesome.css du fichier en ajoutant le code suivant au<head> section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Une fois la police connectée, vous pouvez utiliser les icônes de votre site.
Méthode 2.
Téléchargez la police à partir de génial . Débordez l'archive et téléchargez deux dossiers de l'archive vers le serveur de site - CSS et polices. Si vous avez déjà des dossiers avec de tels noms sur votre site, il vous suffit d'ajouter des fichiers des dossiers téléchargés.
Vous pouvez utiliser la version complète ou minifiée du fichier:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Comment utiliser des icônes impressionnantes de police
Des icônes peuvent être ajoutées à une page Web de deux manières: en définissant les classes appropriées pour le<i> et<span> elements, ouby adding them to the desired element using the :before, :after pseudo-elements etthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Avant {Content: "\ f015"; / * Ajouter l'icône d'accueil * / font-famille: Fontawesome; Color: #aaaaaa; margin-droit: 10px;}1 icônes standard
Font Awesome est conçu pour être utilisé avec des éléments en ligne. Afin d'ajouter des icônes, vous devez d'abord définir la classe FA sur le<i> ou<span> élément.
Pour ajouter l'icône sélectionnée avant ou après l'élément, un vide<i></i> ou<span></span> L'élément est ajouté à l'élément, qui se voit attribuer une classe d'icône, ainsi qu'une classe supplémentaire qui étend le style.
<i class="fa fa-camera-retro"></i>2 grandes icônes
Pour augmenter la taille d'une icône par rapport à son conteneur, utilisez la FA-LG (augmentation de 33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 icônes de largeur fixe
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation oulists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Maison</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Bibliothèque</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Applications</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Réglages</a ></li></ul>4 icônes pour la liste à puces
Utilisez les classes FA-UL et FA-LI pour remplacer les balles par défaut dans un<ul>…</ul> liste à puces.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>élément de la liste</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>élément de la liste</li> <li><i class="fa-li fa fa-square"></i>élément de la liste</li></ul>5 icônes et citations encadrées
Use the fa-border class to set the border for the icon. The pull-right etpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum Dolor SIT AMET, CONCECTETUR ADIPISCING ELIT. DONEC NEC PURUS CONGUE, POSUER LIBERRO IN, Porta Sapien. Dans SED ELIT LeCtus. SED Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 icônes animées
Ajoutez les classes FA-Spin, FA-Pulse, FA-refresh, FA-COG pour configurer les icônes de rotation. L'animation n'est pas prise en charge dans IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 icônes transformées
Pour faire tourner ou retourner les icônes, utilisez les classes FA-rotate- * et fa-flip- *.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 icônes combinées
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, etfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes etcss code to insert using the content property
Icônes pour les applications Web Fa-ajustement - \ f042;Fa-anchor - \ f13d;
Fa-archive - \ f187;
FA-Arrows - \ F047;
Fa-ESterisk - \ F069;
Faat - \ f1fa;
FA-Balance-Scale - \ F24E;
Fa-ban - \ f05e;
FA-BANK - \ F19C;
Fa-barcode - \ f02a;
FA-Battery-Empty - \ F244;
FA-Battery-Half - \ F242;
FA-BATTERY-QUARTER - \ F243;
FA-Battery-Three-Quarters - \ F241;
Fa-battery-full - \ f240;
FA-BED - \ F236;
Fa-beer - \ f0fc;
Fa-bell - \ f0f3;
Fa-bell-slash - \ f1f6;
FA-binoculaire - \ f1e5;
FA-Birthday-Gake - \ f1fd;
FA-BOLT - \ F0E7;
Fa-bomb - \ f1e2;
Fa-book - \ f02d;
Pour faire tourner ou retourner les icônes, utilisez les classes FA-rotate- * et fa-flip- *.
4 ressources connexes
En plus de la collection Font Awesome, vous pouvez également utiliser d'autres polices d'icônes.
Fontello.Fontello a une grande collection de diverses polices d'icônes. Vous pouvez sélectionner les icônes que vous aimez et les télécharger sur votre ordinateur.
Icône de la fondation.La fondation icône est une autre collection de polices d'icônes des développeurs du cadre de la fondation. En plus des icônes standard, le site propose des icônes rondes, des icônes de médias sociaux, etc.
Icônes de matériau.Les icônes de matériau sont des icônes plates unifiées de Google qui incarnent la facilité de perception. Les icônes sont optimisées pour un bel affichage sur toutes les plates-formes communes et pour toutes les résolutions d'écran.
La collection de polices d'icônes contient 750+ icônes. La façon la plus simple d'installerer une collection sur votre site Web est d'utiliser des icônes comme Google Web Fonts. Pour ce faire, le code suivant est inclus dans le balisage de la page:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Pour afficher correctement la police dans les navigateurs, l'élément qui utilisera la police de l'icône reçoit la classe de matériaux-Icônes:
.Matial-Icons {Font-Family: «Icônes matérielles»; Font-Weight: Style de police normal: taille normale de la police: 24px; / * Taille d'icône préférée * / Affichage: bloc en ligne; Largeur: 1em; hauteur: 1em; hauteur de ligne: 1; Text-transform: aucun; Espacement des lettres: word normal: normal; Espace blanc: Nowrap; Direction: LTR; -Webkit-Font-Soothing: Antialiased; / * Prise en charge de tous les navigateurs WebKit * / Rendre du texte: Optimizelelegibilité; / * SAFARI ET CHROME Prise en charge * / -moz-OSX-Font-Soothing: GraysCale; / * Support Firefox. * / Font-Fontage-Settings: 'liga'; / * IE Support. * /}Les icônes elles-mêmes sont ajoutées en utilisant le<I class=''material-Icônes''>code ligature ou html de l'icône</i> Tag, par exemple:
<i class="material-Icônes">account_balance_wallet</i><i class="material-Icônes"></i>La ligature est comprise par tous les navigateurs modernes, c'est-à-dire à partir de la version 10. Le code icône est généré automatiquement, car vous devez cliquer à gauche sur l'image icône et copier le look suggéré.
Taille de l'icône
Taille de l'icône is controlled by additional classes:
.material-Icônes.md-18 {taille de police: 18px;} / * pour<i class="material-Icônes md-18"></i> * /.material-Icônes.md-24 {taille de police: 24px;} / * pour<i class="material-Icônes md-24"></i> * /.material-Icônes.md-36 {taille de police: 36px;} / * pour<i class="material-Icônes md-36"></i> * /.material-Icônes.md-48 {taille de police: 48px;} / * pour<i class="material-Icônes md-48"></i> * /Couleur icône
La couleur des icônes est également définie à l'aide de classes supplémentaires:
.material-Icônes.md-dark {couleur: rgba (0, 0, 0, 0,54);} / *<i class="material-Icônes md-dark"></i> * /.material-Icônes.md-light {couleur: rgba (255, 255, 255, 1);} / *<i class="material-Icônes md-light"></i> * /.material-Icônes.md-dark.md-inactive {couleur: rgba (0, 0, 0, 0,26);} / *<i class="material-Icônes md-dark md-inactive"></i> * /.material-Icônes.md-light.md-inactive {couleur: rgba (255, 255, 255, 0,3);} / *<i class="material-Icônes md-light md-inactive">Visage</i> * /Pour définir une couleur personnalisée, vous devez ajouter une classe qui définit la couleur de l'icône, par exemple:
.material-Icônes.indigo {couleur: # 1A237E;} / *<i class="material-Icônes indigo"></i> * /Questions Fréquemment Posées
- Qu'est-ce que Font est génial en termes simples?
- En substance, c'est une police avec des icônes qui peuvent être ajoutées à n'importe quel élément de page Web pour améliorer sa visibilité et sa conception. La collection se compose de plusieurs centaines d'icônes adaptées à toute tâche et objectif.Plus d'informations sur ce lien
Michel Pinson est un passionné de voyage et créateur de contenu. Fusionnant la passion pour l'éducation et l'exploration, il est engagé à partager les connaissances et à inspirer les autres grâce à un contenu éducatif captivant. Rapprocher le monde en permettant aux individus avec une expertise mondiale et un sentiment de voyager.
