oujood.com

Glyphicons icone de Bootstrap

Pour utiliser les icônes de de la glyphicon icon vous aurez besoin de la balise <span> ainsi qu'une classe de base glyphicon et une classe de chaque icône glyphicon-nom
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 :

chercher |

Comment utiliser les icônes (Glyphicon icon de Bootstrap) 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 icon 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 :

Code : HTML

Exemple :       Copier 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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.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



Voir aussi nos tutoriel :

fonction htmlspecialchars

Convertit les caractères spéciaux en entités HTML

fonction str_replace

Remplace toutes les occurrences dans une chaîne

white-space

Spécifie la façon d'espace blanc dans un élément est traité