Auteur Auteur

Les Symboles Bootstrap

  1. Objectifs

    • Connaitre les symboles Bootstrap
    • Etre capable d’utiliser les symboles Bootstrap

  2. Présentation

    • Les symboles sont des icônes basées sur les polices qui constituent la base des fonctions de ce derniers.
    • Jusqu’à la Bootstrap 3 on disposait de base des icônes de glyphicons.
    • Bootstrap 4 ne contient plus les glyphiconset vous devez utiliser l’un des logiciels des nombreuses bibliothèques de polices.
    • Les icônes basées sur les polices évitent le problème que des symboles individuels entraînent un flot de demandes sur le serveur. Au lieu de cela, tous les symboles sont chargés en tant que police, c’est-à-dire dans un fichier à part.
    • Le symbole est alors comme une lettre. Il est variable en taille et en étendue, mais il ne peut prendre qu’une seule couleur.
    • Dans ce tutoriel, je vais choisir celles de Font Awesome qui sont esthétiques, riches et gratuites.

  3. La librairie Font Awesome

    • Le site Font Awesome propose une collection de 675 icônes dans sa version 4 toutes prêtes pour Bootstrap.

  4. Utilisation de symboles

    • Aucune installation n’est nécessaire pour utiliser les icones de Font Awesome, si vous êtes connecté(e) à Internet.
    • Ou tout simplement utiliser un CDN et Insérer le lien suivant dans la partie <head> </head> de votre page
      • <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    • Une fois le fichier CSS déclaré, vous pouvez utiliser les icônes.
    • L’icône doit être intégrée avec une balise en ligne, par exemple <span> ou <i>, mais d’un point de vue sémantique la balise <span> est plus adaptée.
      1. Insérer une icône directement dans un texte
        • L’exemple suivant illustre la procédure utilisant la bibliothèque Font Awesome pour l’insertion des icônes directement dans un texte.
          • <p> Commencer par déverrouiller la page 
   <span class="fa fa-unlock"></span>
   pour entrer
   <span class="fa fa-sign-in"></span>
</p>
        • Ce qui nous donne:

      2. Associer une icône à une liste
        • On peut aussi créer une liste dont les éléments sont bien identifiés avec une icône :
          • <ul class="fa-ul">
      <li><span class="fa-li fa fa-facebook-official"></span>Facebook</li>
      <li><span class="fa-li fa fa-google-plus-official"></span>Google Plus</li>    
      <li><span class="fa-li fa fa-twitter"></span>Twitter</li>
      <li><span class="fa-li fa fa-instagram"></span>Instagram</li>   
      <li><span class="fa-li fa fa-check-square"></span>Vérifier</li>
      <li><span class="fa-li fa fa-paperclip"></span>Conserver</li>
      <li><span class="fa-li fa fa-clipboard"></span>Conserver</li>
      <li><span class="fa-li fa fa-eraser"></span>Effacer</li>
      <li><span class="fa-li fa fa-cut"></span>Effacer</li>
      <li><span class="fa-li fa fa-print"></span>Imprimer</li>
  </ul>
        • Ce qui nous donne:

  5. Dimensionner les symboles

    • On peut aussi dimensionner les symboles selon le contexte :
      • <p> Commencer par déverrouiller la page 
   <span class="fa fa-unlock fa-lg"></span>
   pour entrer
   <span class="fa fa-sign-in  fa-lg"></span>: Taille normal(fa-lg)
 </p>
 <p> Commencer par déverrouiller la page 
    <span class="fa fa-unlock fa-2x"></span>
    pour entrer
    <span class="fa fa-sign-in  fa-2x"></span>: Taille double(fa-2x)
  </p>
  <p> Commencer par déverrouiller la page 
      <span class="fa fa-unlock fa-3x"></span>
      pour entrer
      <span class="fa fa-sign-in  fa-3x"></span>: Taille triple(fa-3x)
    </p>
    <p> Commencer par déverrouiller la page 
        <span class="fa fa-unlock fa-4x"></span>
        pour entrer
        <span class="fa fa-sign-in  fa-4x"></span>: Taille quadruple(fa-4x)
    </p>
    • Ce qui nous donne:

  6. Application

    • Réalisez la partie de menu cité dans le schéma ci-dessous:
    • Liez les icônes à vos comptes sociales
    • Utilisez les couleurs appropriées

Précédent
Suivant