Bootstrap icône de police (Glyphicons)

Ce chapitre explique l'icône de police (Glyphicons), et quelques exemples pour comprendre son utilisation. formats de polices bootstrap fournis avec plus de 200 glyphes. Tout d'abord, laissez-nous d'abord comprendre ce qui est l'icône de la police.

Quel est l'icône de la police?

Polices icône est une police d'icône utilisée dans le projet Web. Bien que, halfelins Glyphicons besoin d' une licence commerciale, mais vous pouvez basé sur le projet Bootstrap à la libre utilisation de ces icônes.

Afin d'exprimer la gratitude icône auteur, je vous souhaite ajouter des liens GLYPHICONS site pendant l'utilisation.

Obtenir l'icône Polices

Nous avons les environnement installé chapitres Télécharger la version 3.x Bootstrap, et de comprendre sa structure de répertoire. Dans lespolicesdes icônes de dossier peuvent trouver la police qui contient ces fichiers qui suit:

• glyphicons-halfelins-regular.eot
• glyphicons-halfelins-regular.svg
• glyphicons-halfelins-regular.ttf
• glyphicons-halfelins-regular.woff

règles CSS connexes écrites dans le dossier css dossierbootstrap.cssdist etbootstrap-min.cssdans le fichier.

Polices liste d'icônes

Cliquez ici pour afficher la liste des polices disponibles icône.

CSS interprétation des règles

La règle CSS suivante constitue glyphicon classe.

@ Font-face {
  font-family: 'Glyphicons halfelins';
  src: url ( '../ polices / glyphicons-halfelins-regular.eot');
  src: url ( '../ #iefix fonts / glyphicons-halfelins-regular.eot?) Format ( «embedded-opentype'), url ( '../ polices / glyphicons-halfelins-regular.woff') Format ( 'woff'), url ( 'fonts / ../ glyphicons-halfelins-regular.ttf') Format ( 'truetype'), url ( '../ polices / glyphicons-halfelins-regular.svg # glyphicons_halflingsregular') Format ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons halfelins';
  -webkit-font-lissage: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-lissage: niveaux de gris;
}

Donc, la règle font-face est en fait l'endroit pour trouver glyphicons déclaration font-family et l'emplacement.

classe .glyphicon déclarer un décalage par rapport à la partie supérieure de 1px position relative, rendu comme inline-block, les polices des états, des dispositions font-style et de police-poids est normal, réglez la hauteur de ligne à 1. En outre, l'utilisation de -webkit-font-lissage: lissées et -moz-osx-font-lissage: niveaux de gris; obtenir la cohérence cross-browser.

Ensuite, où

.glyphicon: vide {
  largeur: 1em;
}

glyphicon vide.

Il y a la classe 200, chaque classe d'une icône. Ces classes de format commun est le suivant:

.glyphicon-mot clé: avant {
  contenu: "HexValue";
}

Par exemple, les icônes des utilisateurs à utiliser, il est classe comme suit:

.glyphicon utilisateur: avant {
  contenu: "\ E008";
}

usage

Pour utiliser une icône, il suffit d'utiliser le code suivant. S'il vous plaît garder l'espace approprié entre les icônes et le texte.

<Span class = "glyphicon glyphicon-recherche"> </ span>

L'exemple suivant montre comment utiliser l'icône Polices:

Les résultats sont les suivants:

icon Font avec la barre de navigation

Polices personnalisées icône

Nous avons vu comment utiliser l'icône Polices, nous voyons comment personnaliser l'icône de police.

Nous allons commencer l'exemple ci-dessus, en changeant la taille de la police, la couleur, et appliquer le texte ombre être icône personnalisée.

Voici le code commence:

<Type de bouton = classe "bouton" = "btn btn-primaire btn-lg">
  <Span class = "glyphicon glyphicon utilisateur"> </ span> Utilisateur
</ Button>

L'effet est le suivant:

Personnalisé Taille de la police

En augmentant ou en diminuant la taille de la police de l'icône, vous pouvez faire apparaître l'icône plus ou moins grande.

<Type de bouton = classe "bouton" = "btn btn-primaire btn-lg" style = "font-size: 60px">
  <Span class = "glyphicon glyphicon utilisateur"> </ span> Utilisateur
</ Button>

couleur de police personnalisée

<Type de bouton = classe "bouton" = "btn btn-primaire btn-lg" style = "color: rgb (212, 106, 64);">
  <Span class = "glyphicon glyphicon utilisateur"> </ span> Utilisateur
</ Button>

Appliquer texte ombre

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

personnalisé en ligne font icône

Cliquez ici pour personnaliser l'icône de police >>

liste Icône