Bootstrap-Glyphicons

Heutzutage werden Schriftsymbole für ein besseres Benutzererlebnis immer beliebter. In diesem Tutorial wird die Verwendung und Anpassung erläutert Glyphicons mit Bootstrap. Glyphicons ist eine Sammlung monochromatischer Symbole und Symbole, die den meisten Menschen bekannt sind und ihnen helfen, Links und Informationen auf Ihrer Website leicht zu identifizieren. Glyphicons sind Symbolschriftarten, die auf CSS-Sprites basieren, mit denen wir Symbole jeder Farbe erstellen können, indem wir einfach die CSS-Farbeigenschaft auf das angegebene Element anwenden.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Glyphicons sind nicht kostenlos erhältlich, aber der Ersteller hat sie für Bootstrap kostenlos zur Verfügung gestellt. Die Anzahl der verfügbaren Glyphicons finden Sie unter diesem Link Glyphicons-Website. Wenn wir Bootstrap herunterladen, extrahieren Sie die ZIP-Datei und wir finden die Dateistruktur von Bootstrap. Möglicherweise finden wir Glyphicons im Fonts-Ordner im Dist-Ordner. Es enthält die folgenden vier Dateien:

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

Die Dateien „bootstrap.css“ und „bootstrap-min.css“ befinden sich im CSS-Ordner des dist-Ordners.

Verwendung von Icons im Code

Wir können Bootstrap-Symbole zusammen mit verwenden Tag mit Basisklasse Glyphikon und individuelles Symbol glyphicon-*, wobei * ein Schlüsselwort mit einem bestimmten Symbolnamen angibt. Die Syntax lautet wie folgt:

<span class=”glyphicon glyphicon-*”></span>

Zum Beispiel:

<button type=”button” class=”btn btn-primary”>
<span class=”glyphicon glyphicon-music”></span>Music</button>

Der Glyphikon Glyphikon-Musik ist der Name einer bestimmten Symbolklasse, die in definiert ist bottstrap.css. Sie sollten nicht mit anderen Klassen und Verwendungszwecken verwendet werden Tag und wenden Sie die Symbolklassen auf die an .

Beispiel für Glyphicons

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Glyphicon Icons</h2>
   <span  ></span>: Email Icon<br><br>
   <span  ></span>: Phone Icon<br><br>
   <span  ></span>: Music Icon<br><br>
   <span  ></span>: Home Icon <br><br>
   <span  ></span>: Time Icon
</div>
</body>
</html>

Das obige Skript definiert verschiedene Arten von Glyphikonsymbolen wie E-Mail-, Telefon-, Musik-, Heim- und Zeitsymbole, die im Span-Element verwendet werden. Das span-Element enthält die Basisklasse Glyphikon Und Glyphikon-Umschlag ist der Name der jeweiligen Symbolklasse und derselbe wie bei allen anderen Glyphikon-Symbolklassen.

  • Führen Sie die Bootstrap-Glyphicons-Beispieldemo aus

Beispiel für Glyphicons

Anpassen von Glyphicon-Symbolen

Wir können die Glyphicons auch anpassen, z. B. größer, kleiner und besonders kleiner, indem wir btn-lg, btn-sm bzw. btn-xs innerhalb des Schaltflächenelements verwenden. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
      <h2>Glyphicon icons with large size</h2>
      <button type="button"  >
      <span  ></span>: User Icon</button><br><br>
      <button type="button"  >
      <span  ></span>: Headphone Icon</button><br><br>
      <h2>Glyphicon icons with small size</h2>
      <button type="button"  >
      <span  ></span>: Camera Icon</button><br><br>
      <button type="button"  >
      <span  ></span>: Comment Icon </button><br><br>
     <h2>Glyphicon icons with extra small size</h2>
      <button type="button"  >
      <span  ></span>: Earphone Icon</button><br><br>
      <button type="button"  >
      <span  ></span>: Repeat Icon </button>
</div>
</body>
</html>

Das obige Skript definiert, wie Glyphicon-Symbole mit unterschiedlichen Größen auf der Webseite angezeigt werden. Die Klasse btn btn-default btn-lg wird verwendet, um Symbole mit größerer Größe anzuzeigen, die Klasse btn btn-default btn-sm zeigt Symbole mit kleinerer Größe an und die Klasse btn btn-default btn-xs zeigt die Symbole mit besonders kleinerer Größe und all diese an Klassen würden innerhalb des Schaltflächenelements definiert.

  • Führen Sie die Bootstrap-Demo zum Anpassen von Symbolen aus

Beispiel für das Anpassen von Glyphicons-Symbolen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen