web-dev-qa-db-fra.com

Comment fonctionnent Bootstrap Glyphicons?

Je connais quelques notions de base de CSS et HTML et je travaille parfois avec eux, mais je ne suis pas un professionnel, et je suis curieux de savoir comment Bootstrap Glyphicons fonctionnent. Je veux dire qu'il n'y a pas d'images dans le fichier Zip Bootstrap, alors d'où viennent les images?

twitter-bootstrapglyphicons
42
adamsmith

Dans Bootstrap 2.x, les glyphicons ont utilisé la méthode d'image - en utilisant des images comme vous l'avez mentionné dans votre question.

Les inconvénients de la méthode d'image étaient les suivants:

  • Vous ne pouviez pas changer la couleur des icônes
  • Vous ne pouviez pas changer la couleur d'arrière-plan des icônes
  • Vous ne pouviez pas augmenter la taille des icônes

Donc, au lieu des glyphiques dans Bootstrap 2.x, beaucoup de gens ont utilisé Font-awesome, car cela utilisait des icônes SVG qui n'avaient pas de telles limitations.

Dans Bootstrap 3.x, les glyphicons utilisent la méthode font.

L'utilisation d'une police pour représenter une icône présente des avantages par rapport à l'utilisation d'images:

  • Évolutif - fonctionne parfaitement quelle que soit la résolution de l'appareil client
  • Peut changer la couleur avec CSS
  • Peut faire tout ce que les icônes traditionnelles peuvent faire (par exemple changer l'opacité, la rotation, etc.)
  • Peut ajouter des traits, des dégradés, des ombres, etc.
  • Convertir en texte (avec ligatures)
  • Les ligatures sont lues par les lecteurs d'écran
  • Changer les icônes en polices est aussi simple que de changer la famille de polices en CSS

Vous pouvez voir ce que vous pouvez faire avec la méthode de police pour les icônes ici .

Ainsi, dans la distribution Bootstrap, vous pouvez voir les fichiers de police glyphicon:

fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff

Le CSS Bootstrap fait référence à la police glyphicon comme ceci:

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

Et les liens CSS vers cette police en utilisant le .glyphicon classe de base (notez le font-family):

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  ...
}

Et puis chaque glyphicon utilise une classe d'icônes individuelle qui fait référence à un référence Unicode dans la police Glyphicon Halflings, par exemple:

.glyphicon-envelope:before {
  content: "\2709";
}

C'est pourquoi vous devez utiliser la base .glyphicon classe ainsi que la classe d'icônes individuelle par rapport à l'élément span dans Bootstrap 3:

<span class="glyphicon glyphicon-envelope"></span>
90
mccannf