Web Icons - Einführung
Ein Symbol ist ein Symbol, das verwendet wird, um eine bestimmte Aktion oder Funktion auf einer Webseite darzustellen. Symbole werden sowohl in Dokumenten als auch in Anwendungen verwendet und können entweder auswählbar oder nicht auswählbar sein. Die Bilder, die wir auf den Schaltflächen einer Anwendung sehen, sind beispielsweise alle Symbole, und diese Schaltflächen können ausgewählt werden. Wenn wir ein Symbol als Firmenlogo verwenden, kann es normalerweise nicht ausgewählt werden.
Wenn Sie in einer Windows-Umgebung das Systemvolume stummschalten, wird es mithilfe eines Symbols dargestellt (siehe Abbildung unten).
Mithilfe von Web-Symbolen können wir eine Ladeseite, eine deaktivierte Option, einen Link, eine Umleitung usw. darstellen. Diese Symbole können gespiegelt, gedreht, in der Größe geändert, umrandet, invertiert und farbig dargestellt werden.
Symbol Schriftarten
Symbolschriftarten enthalten Symbole und Glyphen. Sobald Sie eine gewünschte Schriftart geladen haben, können Sie jedes der von dieser Schriftart bereitgestellten Symbole unter Verwendung des Klassennamens des Symbols verwenden. Wir können den Symbolen auch verschiedene Farben zuweisen und ihre Größe mithilfe der CSS-Eigenschaften ändern. Es gibt mehrere Symbolbibliotheken (Schriftarten), die Symbole bereitstellen. Dieses Tutorial konzentriert sich auf drei Hauptschriftarten, nämlich -
- Font Awesome
- Bootstrap Glyphicons
- Googles Materialsymbole
Font Awesome
Diese Schriftart bietet 519 frei skalierbare Vektorsymbole. Diese Bibliothek ist sowohl für den persönlichen als auch für den kommerziellen Gebrauch völlig kostenlos. Diese Symbole können einfach angepasst werden. Ursprünglich wurden sie für Bootstrap entwickelt.
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 Symbole sind nicht kostenlos, Sie können sie jedoch in Bootstrap-basierten Projekten verwenden, ohne sie kaufen zu müssen.
Googles Materialsymbole
Google stellt ungefähr 750 Symbole zur Verfügung, die unter "Richtlinien für Materialdesign" erstellt wurden. Diese werden als bezeichnet Material DesignSymbole. Diese Symbole sind einfach und unterstützen alle modernen Webbrowser. Da diese Symbole vektorbasiert sind, sind sie auch skalierbar. Um diese Symbole zu verwenden, müssen wir die Schriftart (Bibliothek) laden.material-icons.