Heim > Artikel > Web-Frontend > Legen Sie die Größe von Symbolen in HTML fest
Legen Sie die Größe von Symbolen in HTML fest
- 王林nach vorne
- 2023-09-03 11:29:061734Durchsuche
In diesem Artikel besprechen wir, wie man die Größe von Symbolen in HTML festlegt.
Icons sind Symbole, die bestimmte Aktionen auf einer Webseite darstellen. Icon Font enthält Symbole und Glyphen. Es gibt mehrere Symbolbibliotheken (Schriftarten), die Symbole bereitstellen und auf HTML-Webseiten verwendet werden können.
Prominente Symbolschriftarten, die häufig von Webentwicklern verwendet werden, sind Font Awesome, Bootstrap Glyphicons und Google's Material Icons我>.
Font Awesome – Diese Bibliothek ist für den kommerziellen und persönlichen Gebrauch völlig kostenlos. Diese Schriftart bietet uns 519 frei skalierbare Vektorsymbole. Diese lassen sich leicht anpassen und wurden ursprünglich mit Bootstrap entwickelt.
Bootstrap Glyphicons – Dies ist eine monochrome Symbolbibliothek, die für Rasterbildformate, Vektorbildformate und Schriftarten verfügbar ist. Es bietet über 250 Glyphen in Schriftartformaten. Sie können diese Schriftarten in Webprojekten verwenden, sie sind jedoch nicht kostenlos.
Material Icons von Google – Google hat 750 Icons gemäß den „Material Design Guidelines“ entworfen, die als Set bereitgestellt werden. Diese Icons werden Material Design Icons genannt. Fast alle Webbrowser unterstützen diese Symbole. Um diese Symbole verwenden zu können, müssen Sie das Schriftart-(Bibliotheks-)Materialsymbol laden.
Lassen Sie uns im folgenden Beispiel die obige Symbolschriftbibliothek verwenden.
Font Awesome Icons
Beispiel
Im Beispiel unten,
Zuerst haben wir die Font Awesome-Bibliothek geladen.
-
Dann verwenden wir eines der Symbole und fügen den Namen dieser Symbolklasse zum HTML-Element innerhalb des
-Tags hinzu. Anschließend vergrößern wir das Symbol, indem wir es mithilfe von CSS definieren und mit dem Klassennamen verwenden.
Wir haben die Größe mit 100 Pixel angegeben.
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.size {
font-size: 100px;
}
</style>
</head>
<body>
<h2>This is a Font Awesome Icon</h2>
<p>We have set the size of this icon to 100px.</p>
<i class="fa fa-inr size"></i>
</body>
</html>
Wie wir in der Ausgabe sehen können, haben wir das Symbol der indischen Währung verwendet und seine Größe mithilfe von CSS definiert.
Google Material-Symbol
Beispiel
Im Beispiel unten,
Wir haben die Materialsymbolbibliothek geladen.
-
Dann verwenden wir eines der Symbole und fügen den Namen dieser Symbolklasse zum HTML-Element innerhalb des
-Tags hinzu. Wir haben das Symbol mit dem Namen Verkehr verwendet, da es zur Kategorie „Aktionen“ gehört.
Anschließend vergrößern wir das Symbol, indem wir es mithilfe von CSS definieren und mit dem Klassennamen verwenden.
<!DOCTYPE html>
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
i.size {
font-size: 150px;
}
</style>
</head>
<body>
<h2>This is a Google Material Icon</h2>
<p>We have set the size of this icon to 150px.</p>
<i class="material-icons size">traffic</i>
</body>
</html>
Wie wir in der Ausgabe sehen können, haben wir ein Ampelsymbol verwendet und dessen Größe mithilfe von CSS definiert.
Leitlinie Glyphe
Beispiel
Im Beispiel unten,
Zuerst laden wir die Bootstrap Glyphicons-Bibliothek.
-
Dann verwenden wir eines der Symbole und fügen den Namen dieser Symbolklasse zum HTML-Element innerhalb des
-Tags hinzu. Im Beispiel verwenden wir ein Symbol namens tree mit dem Klassennamen tree-decidious.
<!DOCTYPE html>
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
i.mysize {
font-size: 100px;
}
</style>
</head>
<body>
<h2>This is a Bootstrap Glyphicons Icon</h2>
<p>We have set the size of this icon to 100px.</p>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
Wie wir in der Ausgabe sehen können, haben wir das Symbol des Baums verwendet und seine Größe mithilfe von CSS definiert.
Das obige ist der detaillierte Inhalt vonLegen Sie die Größe von Symbolen in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!