Comprendre le Web

Icons

Voir aussi : Caractères spéciaux

Font Awesome 4

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

Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.

<i class="fa fa-eur"></i>

Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.

<i class="fa fa-eur" style="font-size:60px;color:red;></i>

The fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase the icon sizes relative to their container.

<i class="fa fa-eur fa-5x"></i>

The fa-ul and fa-li classes are used to replace default bullets in unordered lists.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-eur"></i>euros</li>

The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.

<i class="fa fa-eur fa-border fa-right"></i>

The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.

<i class="fa fa-eur fa-spin"></i>

The fa-rotate-90/180/270 and fa-flip-horizontal/vertical classes are used to rotate and flip icons.

<i class="fa fa-eur fa-rotate-90 fa-flip-horizontal"></i>

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.
The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.

<span class="fa-stack">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x" style="color:red;"></i>
</span>

fa-home : Accueil
fa-gear : Paramètres
fa-search : Rechercher
fa-navicon : Menu
fa-globe : Liens
fa-envelope : Enveloppe / Courriel
fa-phone : Téléphone
fa-chevron-circle-left : page précédente
fa-chevron-circle-right : page suivante
fa-chevron-circle-up : chapitre précédent
fa-chevron-circle-down : chapitre suivant
 
fa-download : Télécharger
fa-upload : Uploader
fa-question : Question
fa-question-circle : Question
fa-commenting : Commentaire
fa-info : Info
fa-info-circle : Info
fa-warning : Attention !
fa-square : Carré (arrondi)
fa-thumb-tack : Punaise
fa-lightbulb-o : Idée
fa-check : Choisi / OK
fa-trash : Poubelle / Supprimer
fa-remove : Supprimer
fa-undo : Annuler / Revenir en arrière
fa-ban : Banni
fa-close : Fermer
fa-lock : Verrouillé
fa-unlock : Déverrouillé
 
fa-smile-o : Content
fa-frown-o : Pas content
fa-thumbs-down : Bien
fa-thumbs-up : Mal
fa-heart : Coeur / J'adore
fa-sort-alpha-asc : Tri ascendant
fa-sort-alpha-desc : Tri descendant
fa-plus : Plus
fa fa-minus : Moins
fa-toggle-off : Bouton off
fa-toggle-on : Bouton on
 
fa-bar-chart : bar chart
fa-pie-chart : Pie chart
fa-line-chart : Line chart
fa-map : Carte géographique
fa-file-pdf-o : Fichier PDF
fa-code : Code
fa-bug : Bug
 
fa-mobile :
fa-tablet : Tablette
fa-laptop : Ordinateur portable
fa-desktop : Ordinateur de bureau
fa-database : Base de données
fa-server : Serveur
 
fa-male : Homme
fa-female : Femme
fa-mars : Homme
fa-venus : Femme
fa-wheelchair : Handicapé
fa-user : Utilisateur
fa-users : Utilisateurs
fa-user-plus : Ajouter un utilisateur
fa-user-times : Supprimer un utilisateur
fa-handshake-o : Poigné de mains
fa-key : Clé / Mot de passe
fa-shopping-cart : Panier d'achat
fa-cart-arrow-down : Ajouter au panier
 
fa-fa-chrome : Navigateur Chrome
fa-firefox : Navigateur Firefox
fa-opera : Navigateur Opera
fa-edge : Navigateur Edge
fa-internet-explorer : Navigateur Internet Explorer
 
fa-html5 : HTML5
fa-css3 : CSS3
 
fa-linux : Linux
 
fa-eur : euro
fa-university : Université / Institution / Bank
fa-balance-scale : Loi / Justice
fa-recycle : recyclable

Plus d'icônes sur : Font Awesome

Font Awesome (sur w3schools.com)

Icons Tutorial