Webentwickler sind sehr daran gewöhnt, Symbole zur Darstellung einer bestimmten Aktion zu verwenden, oder das Symbol kann jeden Befehl oder jede Aktion oder einen Indikator auf einer Webseite grafisch darstellen. Symbole werden sowohl in Dokumenten als auch in Anwendungen verwendet und können entweder auswählbar oder nicht auswählbar sein.
Zum Beispiel sind die Bilder, die wir auf den Schaltflächen einer Anwendung sehen, alle Symbole und diese Schaltflächen können ausgewählt werden.
Um das Design und die Programmierung von Websites zu erleichtern, wurden einige Font-Icon-Bibliotheken entwickelt, d Benutzer, Designer und Programmierer.
In diesem Tutorial werden wir uns einige Bibliotheken wie Font Awesome, Bootstrap Glyphicons und Material Design Google ansehen, bei denen es sich um Bibliotheken mit voreingestellten Symbolschriftarten handelt, die häufig von Webentwicklern verwendet werden.
Font Awesome Tools und Bibliothek
Font Awesome ist eine Schriftartenbibliothek, die Symbole mit einer Reihe von CSS-basierten Tools rendert. Dieses Tool wurde für die Verwendung mit Twitter Bootstrap entwickelt, kann aber individuell als Stylesheets auf jeder Website verwendet werden.
Der Vorteil einer CSS-Bibliothek besteht darin, dass sie auf jedem Browser und Gerät funktioniert und sich sogar an jede Bildschirmauflösung anpasst.
Sie können die Bibliothek von der Font Awesome-Website herunterladen. Eine andere Möglichkeit besteht darin, den direkten Link zur Bibliothek zu verwenden:
Sehen wir uns ein Beispiel für So implementieren Sie Symbole für soziale Netzwerke mit Font Awesome, erstellen wir eine HTML-Datei und fügen den folgenden Code hinzu:
Font Awesome - Social Media Icons
Jedes Symbol wird durch ein Klassen-Fa-Symbol dargestellt, so dass beispielsweise das Symbol für YouTube fa-youtube, sieht das Ergebnis bei der Anzeige im Browser wie folgt aus:
Dann können wir unsere eigenen CSS-Klassen hinzufügen oder die vordefinierte an unser Design anpassen, zum Beispiel fügen wir zwischen den Head-Tags den folgenden CSS-Code ein.
Icon-Dekoration über CSS
Als nächstes führen wir im Browser aus und das Ergebnis ist folgendes:
Wir können sehen, dass wir CSS auf jedes Symbol angewendet und keine Bilder hinzugefügt haben. Eine weitere Möglichkeit zur Verbesserung der Sichtbarkeit besteht darin, die Schwebeklasse, d. h. wenn die Maus über ein Symbol fährt, ändern Sie die Farbe des Buchstabens.
Dazu ändern wir die Farbe in der folgenden Zeile:
.social-icons .fa: schweben {Farbe: grün; } Das Ergebnis, wenn Sie mit der Maus über ein Symbol fahren, ist Folgendes:
Wir können dies auch mit dem Hintergrund jedes Symbols tun und die Hintergrundeigenschaft für eine Farbe ändern, die uns gefällt.
Alle verfügbaren Icons sind auf der Font Awesome-Website zu sehen, die Icons sind nach Kategorien geordnet.
Die Verwendung dieser Art von Icon-Font für unsere Webdesigns ermöglicht es uns, das Laden der Seite zu beschleunigen, da wir keine Bilder benötigen und eine höhere Qualität bieten (insbesondere auf mobilen Geräten beim Zoomen).
Glyphicons Bootstrap-Tools und -Bibliothek
Glyphicons Bootstrap ist eine Bibliothek mit Schriftsymbolen. Es bietet eine Vielzahl von Symbolen im Schriftformat. Diese Symbole sind kostenlos und Sie können die Bibliothek auch mit kostenpflichtigen Symbolen erweitern. Kostenlose Icons können in Webdesign-basierten Projekten verwendet werden, ohne sie kaufen zu müssen. Diese Bibliothek orientiert sich an Symbolen für Schaltflächen, die bestimmte Funktionen wie Drucken, Suchen, Speichern usw. ausführen.
Diese Bibliothek ist als Stylesheets in Bootstrap enthalten. Um sie zu verwenden, können wir Bootstrap von der offiziellen Seite herunterladen oder den folgenden Link verwenden:
Wir können die Symbole auch nach Kategorien auf der Seite Glyphicons sehen.
Als nächstes sehen wir uns ein Beispiel an, in dem wir diese Bibliothek für Symbole für Schaltflächen und Dateneingabeelemente für ein Formular verwenden:
Glyphicon Bootstrap - KnöpfeWir haben auf einem mobilen Gerät getestet, wie es aussehen würde:Glyphicon Bootstrap - Knöpfe
Suche Drucken Anmelden Kaufen
Wir wenden das Listensymbol auf eine Auswahl an
Autos Motorräder
Die Vorteile der Verwendung von Schriftartsymbolen oder Schriftartsymbolen bestehen darin, dass das Aufrufen eines Bildes oder Symbols erspart wird, da die Bilder im SVG-Format in der CSS-Datei der Bibliothek vorliegen und diese Bilder skalierbar sind.
Eine vollständige Bibliothek kann zwischen 10 KB und 40 KB groß sein, was die Ladegeschwindigkeit der Website erhöht.
Die Icons sind Text, daher können wir sie mit CSS manipulieren und es reagiert auf jedes Ereignis, das wir mit Jquery programmieren.
Wenn wir in der CSS-Font-Eigenschaft eine Schriftgröße in angeben em zum Beispiel font-size: 4em das Symbol reagiert und passt sich an jedes Gerät an. Sie können auch verwendet werden, um responsive Anwendungen mit Frameworks zu programmieren, wie im Tutorial zu sehen, mobile Anwendungen mit Ionic Framework zu programmieren, diese Symbole werden ebenfalls verwendet.
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
