Comment Utiliser et Styler des Icônes Avec CSS: Un Guide Ultime

Table de Contenus:

  1. Étapes Pour Commencer à Utiliser des Icônes
  2. Utiliser des Icônes Font Awesome
  3. Dimensionner les Icônes Font Awesome et Donner des Couleurs pour Elles
  4. Utiliser des Icônes avec des Boutons
  5. Ajouter des Effets d'ombre aux Icônes
  6. Utiliser les Icônes Font Awesome dans une Liste
  7. Animer les Icônes Font Awesome
  8. Faire Privoter les Icônes Font Awesome

Étapes Pour Commencer à Utiliser des Icônes

Afin d'utiliser des icônes pour votre site web, vous devez suivre à ces étapes:

1) Mettre en Place sur Votre Site

Copiez le code fourni par le site web Font Awesome en <head> de chaque gabarit ou de chaque page où vous voulez utiliser les icônes Font Awesome.

Pour utiliser la dernière version des icônes font awesome, consultez cette page.

Ici, nous allons utiliser la version 5.8.1 link rel pour définir la relation entre le document actuel et le fichier lié:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Aucun téléchargement ou installation n'est requis.

2) Ajoutez des Icônes à Votre UI

Les icônes doivent être placées dans l'élément <body>. Trouvez votre icône préférée et copiez son code HTML.

Le code de l'icône va ressembler à cela:

<i class="fas fa-camera"></i>

3) Styler Votre Icônes

On peut facilement changer la taille et la couleur d'une icône, voire même y ajouter des ombres en utilisant simplement CSS. Il est également possible d'avoir des icônes animées et animables. Nous allons couvrir tous ces ci-dessous.

Comment Utiliser les Icônes Font Awesome

Les icônes peuvent être placées presque n'importe où en utilisant un préfixe de style (fa) et le nom de l'icône. Font Awesome est utilisé avec des éléments en ligne et il est recommandé de s'y tenir dans un projet avec un élément HTML cohérent.

Il est acceptable d'utiliser les balises <i> et <span> pour ajoutez des icônes sur la page web. Alors, si vous n’aimez pas quand le site vous fournit le code avec la balise <i>, vous êtes libre de la changer en <span>.

Pour référencer une icône, vous devez utiliser son nom, précédé de fa- et votre préfixe correspondant au style préféré (fas, fal, far ou fab).

L'utilisation de l'élément <i> pour référencer l'icône ressemblera à cela:

<i class="fas fa-camera"></i>

Vous pouvez également utiliser un élément span pour référencer l'icône comme le code ci-dessous:

<span class="fas fa-camera"></span>
Le préfixe fa était obsolète en version 5. Le nouveau préfixe par défaut est fas pour le style solide, le style fab pour les marques, far pour le style régulier et fal pour le style léger.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  </head>
  <body>
    <h2>Exemple des icônes</h2>
    <p>Caméra</p>
    <i class="fas fa-camera"></i>
    <p>Voiture</p>
    <i class="fas fa-car"></i>
    <p>Enveloppe</p>
    <i class="fas fa-envelope"></i>
  </body>
</html>

Comment Dimensionner les Icônes Font Awesome et Donner des Couleurs pour Elles

Les icônes héritent de la taille de la police de leur conteneur parent pour correspondre au texte que vous pouvez utiliser avec elles. Vous pouvez augmenter ou diminuer la taille des icônes par rapport à la taille de police héritée avec des classes telles que fa-xs, fa-sm, fa-lg, fa-2x, etc.

La couleur, quant à elle, peut être définie à l’aide de la propriété CSS color. Vous avez juste besoin de définir vos icônes dans un élément <div> et définir la couleur pour elles dans votre style ou juste donner un style à votre élément <i>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      div {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple des icônes avec la taille et la couleur spécifié</h2>
    <div>
      <i class="fas fa-camera fa-xs"></i>
      <i class="fas fa-camera fa-sm"></i>
      <i class="fas fa-camera fa-lg"></i>
      <i class="fas fa-camera fa-2x"></i>
      <i class="fas fa-camera fa-3x"></i>
      <i class="fas fa-camera fa-5x"></i>
      <i class="fas fa-camera fa-7x"></i>
      <i class="fas fa-camera fa-10x"></i>
    </div>
  </body>
</html>

Ici trouvez les détails de l'échelle de dimensionnement:

Classe Taille
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

Il est également possible de styler directement la taille d’une icône en définissant une font-size dans le style externe de l’icône ou directement dans l'attribut style de l'élément HTML référençant l'icône.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #8ebf42;
      }
      .star {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h2>Exemple des icônes avec font-size et color</h2>
    <div>
      <p>Icône de la taille initiale.</p>
      <i class="fas fa-star"></i>
      <p>Font-size: 2em;</p>
      <i class="fas fa-star star"></i>
    </div>
  </body>
</html>

Comment Utiliser des Icônes avec des Boutons

Vous pouvez également ajouter ces icônes lors de la création de boutons. Il vous suffit d'insérer l'icône dans l'élément <button>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Boutons avec icônes</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      button {
        border: none;
        border-radius: 5px;
        color: #ffffff;
        padding: 10px 14px;
        font-size: 16px;
        cursor: pointer;
      }
      button:hover {
        background-color: #666666;
        box-shadow: 2px 4px #999999;
      }
      .btn {
        background-color: #999999;
      }
      .home {
        background-color: #ff6347;
      }
      .menu {
        background-color: #008080;
      }
      .about {
        background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h2>Boutons avec icônes</h2>
    <p>Boutons des icônes:</p>
    <button class="btn">
      <i class="fa fa-home"></i>
    </button>
    <button class="btn">
      <i class="fa fa-bars"></i>
    </button>
    <button class="btn">
      <i class="fas fa-info-circle"></i>
    </button>
    <p>Boutons des icônes avec un texte et des différentes couleurs:</p>
    <button class="home"><i class="fa fa-home"></i> Acceuil</button>
    <button class="menu"><i class="fa fa-bars"></i> Menu</button>
    <button class="about"><i class="fas fa-info-circle"></i> À propos</button>
  </body>
</html>

Comment Ajouter des Effets d'ombre aux Icônes

Pour avoir des effets d'ombre sur des icônes, seule la propriété CSS text-shadow CSS est nécessaire.

Définissez l'ombre pour l'élément auquel l'icône est référencée comme cela:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple des icônes avec un ombre de texte</h2>
    <div>
      <i class="fas fa-apple-alt"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-star-half-alt"></i>
      <i class="far fa-smile"></i>
      <i class="fas fa-paw"></i>
      <i class="fas fa-globe-asia"></i>
    </div>
  </body>
</html>

Comment Utiliser les Icônes Font Awesome dans une Liste

Il est possible de faire des choses impressionants avec des icônes! Si vous voulez, vous pouvez styler votre listes HTML avec des icônes en tant que des puces décoratives.

Pour cela, utilisez la classe fa-ul pour l'élément <ul> et la classe fa-li pour l'élément <li> pour remplacer les puces initiales dans les listes non ordonnées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      span {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple des icônes dans une liste</h2>
    <ul class="fa-ul">
      <li>
        <span class="fa-li">
          <i class="fas fa-check-double"></i>
        </span>
        Élément de la liste 1
      </li>
      <li>
        <span class="fa-li">
          <i class="fas fa-check-circle"></i>
        </span>
        Élément de la liste 2
      </li>
      <li>
        <span class="fa-li">
          <i class="fas fa-check-square"></i>
        </span>
        Élément de la liste 3
      </li>
      <li>
        <span class="fa-li">
          <i class="fas fa-tasks"></i>
        </span>
        Élément de la liste 4
      </li>
    </ul>
  </body>
</html>

Comment Animer les Icônes Font Awesome

<i class="fas fa-spinner fa-spin"></i>

Voyez cet exemple pour voir la différence entre les classes fa-spin et fa-pulse:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icônes avec les classes fa-spin et fa-pulse</h2>
    <p>Spinner spin:</p>
    <i class="fas fa-spinner fa-spin"></i>
    <p>Spinner pulse:</p>
    <i class="fas fa-spinner fa-pulse"></i>
  </body>
</html>

Voyez un autre exemple avec plusieurs icônes animées:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icônes avec animation</h2>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-star fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-haykal fa-spin"></i>
    <i class="fas fa-stroopwafel fa-pulse"></i>
    <i class="fas fa-car fa-spin"></i>
  </body>
</html>

Comment Faire Privoter les Icônes Font Awesome

Souvent on a besoin de faire privoter, retourner ou refléter une icône pour la faire plus impressionante, c'est pour cela on a quelques utilités rapides qui viennent à nous aider à faire cela.

Pour faire pivoter et retourner arbitrairement des icônes, utilisez les classes fa-rotate-* et fa-flip-* lorsque vous référencez l'icône.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Icônes Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icônes avec rotation</h2>
    <i class="fas fa-star-half-alt"></i>
    <i class="fas fa-star-half-alt fa-rotate-90"></i>
    <i class="fas fa-star-half-alt fa-rotate-180"></i>
    <i class="fas fa-star-half-alt fa-rotate-270"></i>
    <i class="fas fa-star-half-alt fa-flip-horizontal"></i>
    <i class="fas fa-star-half-alt fa-flip-vertical"></i>
    <i class="fas fa-star-half-alt fa-flip-both"></i>
  </body>
</html>

Trouvez ici les détails sur le nombre de la rotation:

Classe Nombre de rotation
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal Refléte l'icône horizontalement.
fa-flip-vertical Refléte l'icône verticalement.
fa-flip-both Refléte l'icône verticalement et horizontalement (requires 5.7.0 or greater versions).