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


  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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe