Icônes de base
Pour utiliser les polices icônes impressionnant, ajoutez la ligne suivante dans le <head> de votre page HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Remarque: Aucun téléchargement ou d' installation est nécessaire!
Vous placez polices icônes impressionnants en utilisant le préfixe fa et le nom de l'icône.
Exemple
Le code suivant:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Résulte en:
Font impressionnant est conçu pour être utilisé avec les éléments en ligne. Le <i> et <span> éléments sont largement utilisés pour les icônes.
Notez également que si vous changez la taille de police ou la couleur du récipient de l'icône, l'icône change. Mêmes choses va pour l'ombre, et tout ce qui se fait hérité en utilisant le CSS.
Grandes icônes
La fa-lg (33% increase) de fa-2x fa-3x fa-4x fa-5x (33% increase) , fa-2x , fa-3x , fa-4x , ou fa-5x classes sont utilisées pour augmenter la taille des icônes par rapport à leur conteneur.
Exemple
Le code suivant:
<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>
Résulte en:
Tip: Si vos icônes sont se tranchaient sur le dessus et en bas, augmenter la hauteur de ligne.
Liste des icônes
Les fa-ul et fa-li classes sont utilisées pour remplacer les puces par défaut dans les listes à puces.
Exemple
Le code suivant:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Résulte en:
- List icons
- List icons
- List icons
Icônes Bordée et Pulled
Les fa-border , fa-pull-right ou fa-pull-left classes sont utilisées pour des citations de traction ou article icônes.
Exemple
Le code suivant:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Résulte en:
Icônes animées
La fa-spin classe obtient une icône pour faire tourner et le fa-pulse classe obtient une icône pour tourner avec 8 étapes.
Exemple
Le code suivant:
<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>
Résulte en:
Note: IE8 et IE9 ne supportent pas les animations CSS3.
Pivoté et Flipped Icônes
Les fa-rotate-* et fa-flip-* classes sont utilisées pour faire pivoter et retourner les icônes.
Exemple
Le code suivant:
<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>Résulte en:
Icônes Stacked
Pour empiler plusieurs icônes, utilisez la fa-stack classe sur le parent, la fa-stack-1x classe pour l'icône de taille régulière, et fa-stack-2x pour l'icône plus grande.
La fa-inverse classe peut être utilisée comme une icône de couleur alternative. Vous pouvez également ajouter de plus grandes icônes des classes à la société mère pour contrôler davantage le dimensionnement.
Exemple
Le code suivant:
<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-cameraRésulte en:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Icônes Largeur fixe
La fa-fw classe est utilisée pour définir des icônes à une largeur fixe. Cette classe est utile lorsque différentes largeurs d'icône jeter hors alignement. Particulièrement utile dans les navlists de Bootstrap et des groupes de la liste.
Exemple
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Try It Yourself » Bootstrap
Font impressionnant fonctionne également très bien avec tous les composants bootstrap.