Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Bootstrap-Glyphicons-Font-Icon_Javascript-Fähigkeiten

Ausführliche Erläuterung der Bootstrap-Glyphicons-Font-Icon_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:22:121066Durchsuche

In diesem Kapitel werden Schriftsymbole (Glyphicons) erläutert und ihre Verwendung anhand einiger Beispiele erläutert. Bootstrap wird mit Glyphen in über 200 Schriftformaten geliefert. Lassen Sie uns zunächst verstehen, was ein Schriftartensymbol ist.

Lassen Sie mich zunächst vorstellen, was ein Schriftsymbol ist:

Font Icon ist eine Symbolschriftart, die in Webprojekten verwendet wird. Die Schriftartensymbole befinden sich im Schriftartenordner des heruntergeladenen Bootstrap.

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 -webkit-font-smoothing: antialiased;
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -moz-osx-font-smoothing: grayscale;
}

Die

.glyphicon-Klasse deklariert einen relativen Positionsversatz von 1 Pixel vom oberen Rand, stellt ihn als Inline-Block dar, deklariert die Schriftart, gibt den Schriftstil und die Schriftstärke als normal an und setzt die Zeilenhöhe auf 1. Andernfalls verwenden Sie -webkit-font-smoothing: antialiased und -moz-osx-font-smoothing: greyscale für browserübergreifende Konsistenz.

Über -webkit-font-smoothing und -moz-osx-font-smoothing:

-webkit-font-smoothing-Attribut. Mit diesem Attribut können die Schriftarten auf der Seite geglättet werden. Nach der Verwendung sehen die Schriftarten klarer und komfortabler aus.

keine Seit Subpixel-Antialiased ------Standardwert
antialiasiert . automatisch
Erben ------ Erben Sie das übergeordnete Element
initial
-moz-osx-font-smoothing-Attribut, wobei -osx- angibt, dass es sich um eine seltene Funktionserweiterung handelt, die von Mozilla für ein bestimmtes Betriebssystem eingeführt wurde. Aufgrund der fehlenden Dokumentation lautet der derzeit bekannte Wert:

Graustufen – sehr gutes Anti-Aliasing

auto —----Standardwert

Erben ------ Vererbung

Bootstrap bietet 200 Schriftartensymbole, jedes Symbol entspricht einer Klasse. Bei der Verwendung müssen wir nur das Glyphikon und die entsprechende Klasse einschließen.

Verwendung:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset = "utf-8"> 
  <title>demo</title> 
  <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> 
  <style type="text/css"> 
    body{padding: 20px;} 
  </style> 
</head> 
<body> 
  <span class = "glyphicon glyphicon-lock"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:30px;"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:60px;"></span>   
</body> 
</html>

Mit der Schaltfläche verwenden:

<body> 
  <button class="btn btn-default"> 
    <span class = "glyphicon glyphicon-home"></span> 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-info"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-lg"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-sm"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
</body>

Wirkung:

Benutzerdefiniertes Schriftartensymbol Im vorherigen Beispiel haben wir tatsächlich die Größe und Farbe des Schriftsymbols angepasst, was hier näher erläutert wird.

Sie können die Größe des Schriftsymbols ändern, indem Sie die Schriftgröße oder die Größe der Schaltfläche ändern.

Durch Festlegen der Farbe können Sie die Farbe des Schriftsymbols wie folgt ändern:

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success" style="color:#FF0000;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home" style="color:#FF0000;"></span> Home 
  </button> 
</body>

Wirkung:

Es ist ersichtlich, dass die Farbe des Schriftartsymbols geändert werden kann, indem die Farbe seines übergeordneten Elements oder des Bereichs selbst geändert wird.

Textschatten anwenden

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg" style="text-shadow: black 3px 2px 3px;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg"> 
    <span class = "glyphicon glyphicon-home" style="text-shadow: black 3px 2px 3px;"></span> Home 
  </button> 
</body>

Weitere Informationen finden Sie in den Schriftartsymbolen und in der offiziellen Bootstrap-Dokumentation:

Der obige Inhalt führt Sie in das relevante Wissen über Bootstrap-Glyphicons-Schriftsymbole ein. Ich hoffe, dass es Ihnen gefällt.

Stellungnahme：

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

Vorheriger Artikel：Implementierung des Entfernens (Löschens) bestimmter Elemente in einem Array basierend auf JavaScript_Javascript-KenntnissenNächster Artikel：Implementierung des Entfernens (Löschens) bestimmter Elemente in einem Array basierend auf JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen