Tutoriel Font Awesome

Icônes Font Awesome

Font Awesome est une excellente bibliothèque de polices d'icônes et un cadre CSS.

La police de caractères Font Awesome fournit des icônes vectorielles scalable, qui peuvent être personnalisées en taille, couleur, ombre et tout style CSS.

Pour utiliser les icônes Font Awesome, ajoutez la ligne suivante dans la section de la page HTML :

1、CDN recommandé en Chine

<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、CDN recommandé à l'étranger

<link　rel="stylesheet"　href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Remarque : Il n'est pas recommandé de le télécharger pour l'installation, vous pouvez simplement l'inclure dans le head du document html.
Remarque : Ce tutoriel utilise 4.7version .0.

Vous pouvez utiliser le préfixe fa et le nom de l'icône pour placer l'icône Font Awesome.

Exemples en ligne

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i　class="fa　fa-car"></i>
<i　class="fa　fa-car"　style="font-taille:48px;"></i>
<i　class="fa　fa-car"　style="font-taille:60px;color:red;"></i>
　
</body>
</html>

Voyons ce que cela donne ‹/›

Font Awesome est conçu pour être utilisé avec des éléments en ligne. Les éléments <i> et <span> sont largement utilisés pour les icônes.

En outre, si vous modifiez la taille ou la couleur de la police du conteneur d'icône, l'icône changera.

grand icône

fa-lg (augmenter33％)，fa-2x,fa-3x, fa-4x, ou fa-5x est utilisé pour augmenter la taille de l'icône par rapport à son conteneur.

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i　class="fa　fa-car　fa-lg"></i>
<i　class="fa　fa-car　fa-2x"></i>
<i　class="fa　fa-car　fa-3x"></i>
<i　class="fa　fa-car　fa-4x"></i>
<i　class="fa　fa-car　fa-5x"></i>
　
</body>
</html>

Voyons ce que cela donne ‹/›

Astuce : Si vos icônes sont coupées en haut et en bas, augmentez la hauteur de ligne.

Icônes de liste

fa-ul et fa-La classe 'li' est utilisée pour remplacer le préfixe par défaut dans les listes non ordonnées.

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul　class="fa-ul">
　　<li><i　class="fa-li　fa　fa-check-square"></i>Liste des icônes</li>
　　<li><i　class="fa-li　fa　fa-spinner　fa-spin"></i>Liste des icônes</li>
　　<li><i　class="fa-li　fa　fa-square"></i>Liste des icônes</li>
</ul>
　
</body>
</html>

Voyons ce que cela donne ‹/›

L'effet après l'exécution est le suivant :

bordure et icônes tirées

fa-border, fa-pull-right ou fa-pull-La classe 'left' est utilisée pour les citations tirées ou les icônes d'articles.

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i　class="fa　fa-quote-left　fa-3x　fa-pull-left　fa-border"></i>
Tutoriel de base　--　Apprendre les bases est la clé pour aller plus loin !!<br>
Tutoriel de base　--　Apprendre les bases est la clé pour aller plus loin !!<br>
Tutoriel de base　--　Apprendre les bases est la clé pour aller plus loin !!<br>
Tutoriel de base　--　Apprendre les bases est la clé pour aller plus loin !!
　
</body>
</html>

Voyons ce que cela donne ‹/›

L'effet après l'exécution est le suivant :

Icônes dynamiques

fa-La classe 'spin' permet aux icônes de pivoter, fa-La classe 'pulse' permet aux icônes d' 8 tourne à chaque cycle de pas.

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Voyons ce que cela donne ‹/›

L'effet après l'exécution est le suivant :

Attention: IE8 et IE9 Non pris en charge par CSS3 animation.

Icônes pivotantes et renversées

fa-rotate-* et fa-flip-* La classe est utilisée pour faire pivoter et renverser les icônes.

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Voyons ce que cela donne ‹/›

L'effet après l'exécution est le suivant :

Icônes empilées

Pour empiler plusieurs icônes, utilisez 'fa' sur le parent.-La classe 'stack', fa-stack-1La classe 'x' est utilisée pour les icônes de taille normale, fa-stack-2x est utilisé pour les icônes plus grandes.

fa-La classe 'inverse' peut être utilisée pour remplacer la couleur des icônes. Vous pouvez également ajouter une plus grande classe d'icône au parent pour contrôler davantage la taille.

Exemple

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<span　class="fa-stack　fa-lg">
　　<i　class="fa　fa-circle-thin　fa-stack-2x"></i>
　　<i　class="fa　fa-twitter　fa-stack-1x"></i>
</span>
fa-twitter　on　fa-circle-thin<br>
　
<span　class="fa-stack　fa-lg">
　　<i　class="fa　fa-circle　fa-stack-2x"></i>
　　<i　class="fa　fa-twitter　fa-stack-1x　fa-inverse"></i>
</span>
fa-twitter　(inverse)　on　fa-circle<br>
　
<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"　style="color:red;"></i>
</span>
fa-ban　on　fa-camera
　
</body>
</html>

Voyons ce que cela donne ‹/›

L'effet après l'exécution est le suivant :

Icône de largeur fixe

fa-La classe 'fw' est utilisée pour définir une largeur d'icône fixe. Elle est très utile lorsque les largeurs des icônes diffèrent et ne sont pas alignées. Elle est particulièrement adaptée aux listes de navigation et aux groupes de listes de Bootstrap.

Exemple

<!DOCTYPE　html>
<html>
<head>
<meta　name="viewport"　content="width=device-width,　initial-scale=1">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>Avec largeur fixe :/p>
<div　class="list-groupe">
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-home　fa-fw"></i>　Accueil</a>
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-book　fa-fw"></i>　Bibliothèque</a>
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-pencil　fa-fw"></i>　Applications</a>
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-cog　fa-fw"></i>　Paramètres</a>
</div>
<p>Sans largeur fixe :/p>
<div　class="list-groupe">
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-home"></i>　Accueil</a>
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-book"></i>　Bibliothèque</a>
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-pencil"></i>　Applications</a>
　　<a　href="#"　class="list-groupe-item"><i　class="fa　fa-cog"></i>　Paramètres</a>
</div>
　
</body>
</html>

Voyons ce que cela donne ‹/›

L'effet après l'exécution est le suivant :

Icônes de marque Font Awesome