Bootstrap Glyphicons
Dies ist eine Bibliothek monochromatischer Symbole, die in Rasterbildformaten, Vektorbildformaten und als Schriftarten verfügbar sind. Es bietet über 250 Glyphen im Schriftformat. Sie können diese Schriftarten in Ihren Webprojekten verwenden. Diese Glyphen sind jedoch nicht kostenlos, wenn Sie nichts ausgeben müssen, falls Sie sie in Bootstrap-basierten Projekten verwenden.
Laden der Schriftart (Bibliothek)
Kopieren Sie zum Laden der Bootstrap Glyphicons-Bibliothek die folgende Zeile und fügen Sie sie in den Abschnitt <head> der Webseite ein.
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>Verwenden des Symbols
Bootstrap Glyphicons bietet eine Reihe von Symbolen. Wählen Sie eine davon aus und fügen Sie den Namen der Symbolklasse zu einem beliebigen HTML-Element im <body> -Tag hinzu. Im folgenden Beispiel haben wir das Symbol des Baums verwendet und sein Klassenname lautettree-deciduous.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Größe definieren
Sie können die Größe eines Symbols erhöhen oder verringern, indem Sie seine Größe im CSS definieren und zusammen mit dem Klassennamen wie unten gezeigt verwenden. Im folgenden Beispiel haben wir die Größe als 6 em definiert.
<html>
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Es wird die folgende Ausgabe erzeugt:
Farbe definieren
Sie können die Farbe eines Symbols mithilfe des CSS definieren. Das folgende Beispiel zeigt, wie Sie die Farbe des Baumsymbols ändern.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em; color: blue;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Es wird die folgende Ausgabe erzeugt -