Glyphicons de Bootstrap

Bootstrap fournit 260 glyphicons de la Glyphicons halfelins.
Glyphicons peut être utilisé dans le texte, boutons, barres d'outils, navigation, formulaires, etc..
Voici quelques exemples de glyphicons :
Glyphicon de l’enveloppe :
Glyphicon de l’impression :
Glyphicon  de recherche :
Glyphicon de l’acccueil :

Tutoriel Bootstrap 3

Comment utiliser les icônes dans votre Code

Pour utiliser les icônes de de la glyphicon vous aurez besoin de la balise <span> ainsi qu'une classe de base glyphicon et une classe de chaque icône glyphicon-nom. La syntaxe générale pour l'utilisation des icônes de la glyphicon  est :

< span class = « glyphicon glyphicon-nom » >< / span >

Où "glyphicon-nom" est le nom de la classe icône particulière (p. ex. glyphicon-search, glyphicon-user, glyphicon-star, glyphicon-home etc. …), ces classes sont définies dans la feuille de style bootstrap.css.

Par exemple, pour utiliser l'icône de recherche vous pouvez placer le code suivant à peu près n'importe où :

 
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>

Exemple Glyphicon

L'exemple suivant montre les différentes façons d'utiliser les  glyphicons :

Sélectionner le code
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Exemple glyphicons</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2> Exemples Glyphicon </h2>
  <p>Icon Accueil : <span class="glyphicon glyphicon-home"></span></p>   
  <p>Icon Accueil comme lien:
    <a href="#"><span class="glyphicon glyphicon-home"></span></a>
  </p>
  <p>Icon Envelope : <span class="glyphicon glyphicon-envelope"></span></p>   
  <p>Icon Envelope comme lien:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>Icon recherche : <span class="glyphicon glyphicon-search"></span></p>
  <p>Icon recherche en boutton:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Icon recherche en boutton avec un style:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Icon imprimer: <span class="glyphicon glyphicon-print"></span></p>     
  <p>Icon imprimer boutton avec style et comme lien:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print
    </a>
  </p>
</div>
</body>
</html>

 

Ces icônes sont disponibles en format de polices pour plus de facilité d'utilisation.

Étant donné que ces Glyphicons sont des polices de base, vous pouvez créer des icônes dans n'importe quelle couleur, il suffit d’appliquer simplement la propriété CSS color sur l'élément spécifique.


chapitre précédent chapitre suivant

Par carabde 25 decembre 2015