Définit toutes les propriétés d'arrière-plan dans une déclaration
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 :
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>
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