Heim > Web-Frontend > Bootstrap-Tutorial > So verwenden Sie das Bootstrap-Schriftartsymbol

So verwenden Sie das Bootstrap-Schriftartsymbol

(*-*)浩
Freigeben: 2019-07-11 13:31:56
Original
3449 Leute haben es durchsucht

Bootstrap wird mit Glyphen in über 200 Schriftformaten geliefert. Lassen Sie uns zunächst verstehen, was ein Schriftartensymbol ist.

So verwenden Sie das Bootstrap-Schriftartsymbol

Was ist ein Schriftartensymbol? (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Font-Symbol ist eine Symbolschriftart, die in Webprojekten verwendet wird. Obwohl für Glyphicons Halflings eine kommerzielle Lizenz erforderlich ist, können Sie diese Symbole über das projektbasierte Bootstrap kostenlos verwenden.

Um dem Autor des Symbols unseren Dank auszudrücken, hoffen wir, dass Sie bei der Verwendung einen Link zur GLYPHICONS-Website angeben.

Holen Sie sich das Schriftartensymbol

Wir haben die Bootstrap 3.x-Version im Kapitel „Umgebungsinstallation“ heruntergeladen und ihre Verzeichnisstruktur verstanden. Schriftsymbole finden Sie im Schriftartenordner, der die folgenden Dateien enthält:

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons - halflings-regular.ttf

glyphicons-halflings-regular.woff

Die relevanten CSS-Regeln sind in Bootstrap.css und Bootstrap-min.css im CSS-Ordner im Dist-Ordner auf dem geschrieben Datei.

Es gibt 200 Klassen, jede Klasse ist für ein Symbol. Das allgemeine Format dieser Klassen ist wie folgt:

.glyphicon-keyword:before {
  content: "hexvalue";
 }
Nach dem Login kopieren

Um Symbole zu verwenden, verwenden Sie einfach den folgenden Code. Bitte lassen Sie zwischen Symbol und Text ausreichend Platz.

<span class="glyphicon glyphicon-search"></span>
Nach dem Login kopieren

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Bootstrap-Schriftartsymbol. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage