Bootstrap Schriftart Symbol (Glyphicons)

In diesem Kapitel wird die Schriftart Symbol (Glyphicons) erklären, und einige Beispiele ihrer Verwendung zu verstehen. Bootstrap Font-Formate mit mehr als 200 Glyphen gebündelt. Zunächst lassen Sie uns zuerst verstehen, was die Schrift Symbol ist.

Was ist die Schriftart Symbol?

Symbol Schriftarten ist ein Symbol Schriftart im Web-Projekt verwendet. Obwohl Glyphicons Hobbits brauchen eine kommerzielle Lizenz, aber Sie können diese Symbole zur kostenlosen Nutzung auf Bootstrap - Projekt.

Um Dankbarkeit Symbol Autor zum Ausdruck zu bringen, ich hoffe, Sie Links GLYPHICONS Website während des Gebrauchs hinzuzufügen.

Holen Sie sich das Symbol Schriftarten

Wir haben die Umgebung installiert Kapitel die Bootstrap - 3.x - Version herunterladen, und zu verstehen , seine Verzeichnisstruktur. In denFonts- Ordner - Symbole können die Schriftart zu finden , die diese Dateien folgendes enthält:

• glyphicons-Hobbits-regular.eot
• glyphicons-Hobbits-regular.svg
• glyphicons-Hobbits-Regular.ttf
• glyphicons-Hobbits-regular.woff

Verwandte CSS - Regeln imdistOrdner css - Ordnerbootstrap.cssgeschrieben undBootstrap-min.cssinnerhalb der Datei.

Symbol Schriftarten Liste

Klicken Sie hier , um die Liste der verfügbaren Schriftarten Symbol anzuzeigen.

CSS Interpretation der Regeln

Die folgende CSS-Regel bildet glyphicon Klasse.

@ Font-face {
  font-family: 'Glyphicons Halblinge';
  src: url ( '../ fonts / glyphicons-Hobbits-regular.eot');
  src: url ( '../ fonts / glyphicons-Hobbits-regular.eot #iefix?') format ( 'Embedded-Opentype'), url ( '../ fonts / glyphicons-Hobbits-regular.woff') Format ( 'woff'), url ( '../ fonts / glyphicons-Hobbits-Regular.ttf') format ( 'truetype'), url ( '../ fonts / glyphicons-Hobbits-regular.svg # glyphicons_halflingsregular') Format ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halblinge';
  -webkit-font-Glättung: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-Glättung: Graustufen;
}

So font-face-Regel ist in der Tat der Ort, an glyphicons Deklaration font-family und Standort.

.glyphicon Klasse eine relative Position von der Spitze des 1px versetzt erklären, übertragen als inline-block, die Anweisung Schriftarten, Schriftstil Bestimmungen und font-weight normal ist , stellen Sie die Zeilenhöhe auf 1. Darüber hinaus ist die Verwendung von -webkit-font-Glättung: Anti - Aliasing und -moz-osx-font-Glättung: Graustufen, erhalten Cross-Browser - Konsistenz.

Dann, in der

.glyphicon: leer {
  Breite: 1em;
}

Leere glyphicon.

Es gibt 200-Klasse, jede Klasse für ein Symbol. Diese gemeinsame Formatklasse ist wie folgt:

.glyphicon-Stichwort: vor {
  Inhalt: "hexvalue";
}

Zum Beispiel verwenden Benutzer Symbole, es ist Klasse, wie folgt:

.glyphicon-user: vor {
  Inhalt: "\ E008";
}

Verwendung

Um ein Symbol zu verwenden, verwenden Sie einfach den folgenden Code ein. Bitte halten Sie den entsprechenden Raum zwischen Symbolen und Text.

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

Das folgende Beispiel zeigt, wie das Symbol Schriftarten verwenden:

Die Ergebnisse sind wie folgt:

Font-Symbol mit der Navigationsleiste

Benutzerdefinierte Symbol Schriftarten

Wir haben gesehen, wie das Symbol Schriftart zu verwenden, dann sehen wir, wie die Schriftart Symbol anpassen.

Wir werden das obige Beispiel zu starten, durch Ändern der Schriftgröße, Farbe und Textschatten anwenden angepasst Symbol zu sein.

Hier ist der Code beginnt:

<Taste type = "button" class = "btn btn-primären BTN-lg">
  <Span class = "glyphicon glyphicon-user"> </ span> Benutzer
</ Button>

Der Effekt ist wie folgt:

Benutzerdefinierte Schriftgröße

Durch die Erhöhung oder die Schriftgröße des Symbols abnimmt, können Sie das Symbol größer oder kleiner erscheinen zu lassen.

<Taste type = "button" class = "btn btn-primären BTN-lg" style = "font-size: 60px">
  <Span class = "glyphicon glyphicon-user"> </ span> Benutzer
</ Button>

Benutzerdefinierte Schriftfarbe

<Taste type = "button" class = "btn btn-primären BTN-lg" style = "color: rgb (212, 106, 64);">
  <Span class = "glyphicon glyphicon-user"> </ span> Benutzer
</ Button>

Bewerben Text Schatten

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

Online benutzerdefinierte Schriftart Symbol

Klicken Sie hier , um die Schriftart Symbol anpassen >>

Icon-Liste