Verwenden Sie Bitmap-Bilder wie PNGs und GIFs für Icons auf Ihrer Website? Falls ja, haben Sie vielleicht bemerkt, dass sie ziemlich groß sein können, insbesondere wenn sie detailliert oder zahlreich sind. Dies erhöht nicht nur die Dateigröße, sondern kann auch Ihre Website verlangsamen, da für jedes Icon mehrere HTTP-Anfragen erforderlich sind.
Während CSS-Sprites eine Lösung bieten, lösen sie das Problem großer Dateigrößen nicht vollständig. Ein weiterer Nachteil von Bitmap-Icons ist ihre mangelnde Flexibilität und Skalierbarkeit. Das Vergrößern dieser Icons oder das Anzeigen auf hochauflösenden Bildschirmen wie dem Retina-Display von Apple führt oft zu einem verschwommenen Erscheinungsbild.
Wenn Ihnen diese Probleme bekannt vorkommen, sollten Sie in Erwägung ziehen, auf Icon-Schriftarten umzusteigen, um eine effizientere und skalierbare Lösung zu erhalten.
Erkundung der Vorteile von Icon-Schriftarten
Eine Icon-Schriftart ist im Wesentlichen eine Sammlung von Icons, die in eine Web-Schriftart verpackt sind und mithilfe der Regel @font-face leicht in eine Website integriert werden können. Wie Chris bei CSS-Tricks hervorhebt, bieten Icon-Schriftarten mehrere wesentliche Vorteile gegenüber traditionellen Bild-Icons:
- Da sie vektorbasiert sind, sind Icon-Schriftarten auflösungsunabhängig und gewährleisten eine klare und scharfe Anzeige auf verschiedenen Bildschirmauflösungen, einschließlich hochauflösender Bildschirme wie Retina-Displays.
- Icon-Schriftarten sind skalierbar und ermöglichen Größenanpassungen ohne Qualitäts- oder Klarheitsverlust.
- Da es sich um Schriftarten handelt, können Sie ihre Farbe, Transparenz, Textschatten und Größe leicht mit CSS ändern.
- Sie können mit CSS3 animiert werden, um Ihrer Website ein dynamisches Element hinzuzufügen.
- Die Verwendung von
@font-facefür Icon-Schriftarten wird weitgehend unterstützt, auch in älteren Browsern wie Internet Explorer 4 (mit .eot). - Die Verwendung von Icon-Schriftarten führt zu weniger HTTP-Anfragen und einer insgesamt geringeren Dateigröße.
Hier ist eine Liste einiger der besten kostenlosen Icon-Schriftarten:
Achten Sie immer darauf, die Lizenzbedingungen zu überprüfen und einzuhalten, bevor Sie eine Icon-Schriftart in Ihre Website einbetten, als Zeichen des Respekts für die Bemühungen und Arbeiten des Erstellers.
Implementierung der Regel @font-face
Wie bereits erwähnt, werden Icon-Schriftarten mithilfe der Regel @font-face innerhalb von CSS in Webseiten eingebettet. Diese Regel ermöglicht es uns, eine neue font-family zu definieren. Nehmen wir die Schriftart ‚Web Symbols‘ als Beispiel:
@font-face{
font-family: 'WebSymbolsRegular';
src: url('fonts/websymbols-regular-webfont.eot');
src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/websymbols-regular-webfont.woff') format('woff'),
url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
Im HTML-Dokument verwenden wir zur Anzeige der Icons einfach Zeichen, die jedem Icon entsprechen. Anstatt die font-family global anzuwenden, können wir bestimmte Elemente gezielt ansprechen, indem wir eine eindeutige Klasse hinzufügen, wie folgt:
<ul class="icon-font"> <li>h</li> <li>i</li> <li>j</li> <li>A</li> <li>I</li> </ul>
Dann definieren wir in CSS diese neue font-family für die von uns hinzugefügte Klasse:
.icon-font {
font-family: WebSymbolsRegular;
font-size: 12pt;
}
Integration von Icons mit Pseudo-Elementen
Pseudo-Elemente bieten eine weitere kreative Möglichkeit, Icons einzubinden. Betrachten Sie das folgende HTML-Markup als Ausgangspunkt:
<ul class="icon-font pseudo"> <li>Antwort</li> <li>Allen antworten</li> <li>Weiterleiten</li> <li>Anhang</li> <li>Bild</li> </ul>
Im CSS können wir diese Liste durch die Verwendung von Pseudo-Elementen verbessern, um Icons vor jedem Element anzuzeigen:
ul.icon-font.pseudo li:before {
font-family: WebSymbolsRegular;
margin-right: 5px;
}
ul.icon-font.pseudo li:nth-child(1):before {
content: "h";
}
ul.icon-font.pseudo li:nth-child(2):before {
content: "i";
}
ul.icon-font.pseudo li:nth-child(3):before {
content: "j";
}
ul.icon-font.pseudo li:nth-child(4):before {
content: "A";
}
ul.icon-font.pseudo li:nth-child(5):before {
content: "I";
}
Private Use Unicode
Es gibt ein Szenario, in dem Icons nicht in Standardzeichen (A, B, C, D usw.) eingebettet sind, sondern in Unicode-Private-Use-Bereichen, um Zusammenstöße zwischen Zeichen zu vermeiden. Diese Methode wird von Tools wie FontAwesome verwendet, bei denen die Zeichencodes in das Stylesheet wie folgt eingefügt werden:
.icon-glass:before {
content: "\f0c6";
}
Um das Icon direkt in HTML einzufügen, wird der Code \f0c6 nicht gerendert, da es sich nicht um ein gültiges HTML-kodiertes Zeichen handelt.
HTML erfordert eine numerische Referenzmarkierung, um Sonderzeichen zu rendern. Hierzu muss die hexadezimale Zahl (die das Zeichen repräsentiert) mit einem Kaufmannsund (&), einem Doppelkreuz (#) und einem x versehen werden. Zum Beispiel wird f0c6 in HTML zu . In FontAwesome zeigt dieser Code ein Büroklammer-Icon an, wie folgt:
Font-Untermengung
Wenn Ihre Icon-Sammlung ungenutzte Zeichen enthält, können Sie sie durch Untermengung der Schrift eliminieren, was auch die Größe der Schriftdatei reduziert. Ein praktisches Werkzeug dafür ist der @font-face Generator von FontSquirrel.
Besuchen Sie den Generator, fügen Sie Ihre Schrift hinzu und wählen Sie Expert. Wählen Sie dann Benutzerdefinierte Untermengung für weitere Optionen aus.
Beispielsweise verwenden wir die Schriftart Sociolico für soziale Medienicons auf unserer Website, für die wir nur die Icons für Dribble, Facebook und Twitter benötigen, die durch d, f und t dargestellt werden. Diese Zeichen werden im Feld Einzelne Zeichen wie folgt eingegeben:
Jetzt können Sie die Schrift herunterladen, die in diesem Fall auf eine geringe Größe von 3 KB bis 5 KB reduziert wurde. Beachten Sie, dass nur die Zeichen d, f, und t als Icons gerendert werden; alle anderen Zeichen erscheinen als reguläre Buchstaben.
Abschließende Gedanken
Diese Praxis schließt die Möglichkeit aus, hochdetaillierte Effekte wie diese hinzuzufügen, bietet jedoch eine flexible, skalierbare, retinafähige Lösung mit minimaler Dateigröße. Wenn Ihr Design den Verzicht
auf hohe Details verkraften kann, ist diese Methode zur Bereitstellung von Icons äußerst vorteilhaft.
Für diejenigen, die weiter erkunden möchten, finden Sie unten einige hilfreiche Referenzen sowie unsere Demo und den Quellcode zum Download.
Demo ansehen
Quellcodes herunterladen
Hinweis: Dieser Beitrag wurde erstmals am 5. Dezember 2012 veröffentlicht.
