In der Anfangszeit waren Icons leicht verfügbar, aber die effiziente Implementierung in WordPress war etwas schwieriger. Man konnte einige Probleme mit Sprites umgehen, aber sie waren nicht immer ein guter Weg, und als Retina-Bildschirme herauskamen, wurde das Problem vergrößert (im wahrsten Sinne des Wortes).
Eine der häufigsten Lösungen für dieses Problem ist die Verwendung einer Icon Font. Symbole sind Webfonts oder Vektoren, so dass du sie stufenlos skalieren kannst und viele Icons in eine einzige Datei passen können, was die Anzahl deiner Anfragen erheblich reduziert. So kannst du fast jedes Icon verwenden, das du dir vorstellen kannst. Damit kommen aber auch einige Leistungsüberlegungen.
Wir zeigen dir in diesem Artikel ein paar verschiedene Möglichkeiten, WordPress-Icon Fonts zu verwenden, wo du sie bekommst und welche Methode für deine Website die beste ist.
- Wo finde ich Icon Fonts?
- Schnelle und einfache Möglichkeiten zur Verwendung von Icon Fonts
- Performance-Problem bei Icon Fonts berücksichtigen
- Icon Fonts lokal hosten (nur die, die du brauchst)
- Bedenken bezüglich der Barrierefreiheit durch Icon Fonts
Wo finde ich Icon Fonts?
Es gibt viele tolle Orte, an denen du jetzt Icon Fonts für deine WordPress-Seite finden kannst. Gib einfach „icon font“ in Google ein, um großartige Resultate zu erhalten. Eine der beliebtesten und am häufigsten verwendeten ist Font Awesome. Zum Zeitpunkt des Schreibens dieses Artikels hat es mehr als 1.400 kostenlose Icons sowie mehr als 4.500 Icons in der Pro-Version. Es enthält Icons für fast alles, von der Benutzeroberfläche bis hin zu sozialen Symbolen, Pfeilen und vielen anderen Arten von Symbolen.
Hier sind noch ein paar andere, die du dir ansehen kannst:
- IcoMoon ist ein weiterer beliebter Service mit mehr als 5.500 kostenlosen Vektorsymbolen und mehr als 4.000 Premiumsymbolen. Tatsächlich werden wir ihr Tool zum Generieren von Icon Fonts weiter unten verwenden.
- Fontello ist ein weiterer großartiger Service, der dir hilft, Icon Fonts zu entdecken und zu erstellen.
- Wenn du nach einem superleichten Icon-Sets suchst, solltest du unbedingt Bytesize auschecken. Alle 84 Symbole sind auf 9KB verkleinert (2 KB in SVGZ, oder Gzipped).
- Wenn du SVG-Symbole einfach manuell verwenden möchtest, wirst du keine bessere kostenlose Bibliothek als iconmonstr oder eine bessere Premium-Bibliothek als Iconfinder finden.
Schnelle und Einfache Möglichkeiten zur Verwendung von WordPress Icon Fonts
Zuerst werden wir auf einige der schnellen und einfachen Möglichkeiten zur Verwendung von WordPress Icon Fonts eingehen. Kleine Warnung, nicht alle von ihnen sind die besten in Bezug auf die Leistung. Wir empfehlen daher, in den Abschnitt über die beste Methode zu springen.
Option 1 – Ein WordPress-Plugin Verwenden
Der schnellste Weg, um mit WordPress-Icon Fonts zu arbeiten, ist die einfache Verwendung eines Plugins eines Drittanbieters. Das kostenlose Font Awesome Integration Plugin enthält die neueste Font Awesome 5 Symbolbibliothek. Nachdem du es installiert und aktiviert hast, genügt ein einfacher Shortcode, um ein Symbol einzufügen. Sie haben jetzt sogar ein WordPress-Symbol! Ziemlich cool.
Du kannst dir die grundlegende Gebrauchsanweisung von Font Awesome 5 ansehen, um zusätzliche Möglichkeiten zu finden, sie zu verwenden und anzupassen, sowie deren Icon-Bibliothek. Zum Beispiel haben wir unten das WordPress Font Awesome Symbol in einen Gutenberg Shortcode-Block eingefügt und fa-3x hinzugefügt, um es dreimal größer zu machen.
[fawesome iclass="fab fa-wordpress fa-3x"]
So sieht es auf dem Frontend aus. Ziemlich einfach, oder? Wir hatten ein Font Awesome Icon auf unserer Website innerhalb weniger Minuten eingerichtet.
Wenn du viele einfach zu bedienende Shortcodes möchtest, solltest du dir vielleicht auch das Shortcodes Ultimate Plugin ansehen. Sie haben ein Premium-Icon-Add-on, das du verwenden kannst.
Das oben genannte ist eine großartige Lösung, wenn du deine Kunden Icons zu Beiträgen oder Seiten hinzufügen lassen möchtest, aber wenn du diese Elemente innerhalb deines Themes oder Plugins verwenden möchtest, ist es am besten, sie selbst in eine Reihe zu stellen (wird weiter unten darauf eingehen).
Option 2 – Verwendung der Eingebauten Dashicons
Dashicons ist eine Reihe von Icon Fonts, die standardmäßig enthalten sind, da WordPress sie im Backend verwendet. Du musst es auf dem Frontend in die Warteschlange stellen, aber alles, was du brauchst, ist der Name des Skripts, die Datei ist bereits für WordPress verfügbar.
Du kannst folgendes zu deiner functions.php Datei hinzufügen, oder wir empfehlen die Verwendung eines kostenlosen Plugins wie Code Snippets. Dies minimiert das Risiko, dass du dein Theme beschädigst, und die Änderungen werden auch während der Aktualisierung des Themes bestehen bleiben.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Du kannst dann auf die Dashicons Website gehen, ein Symbol auswählen und auf den Link „HTML kopieren“ klicken, der dir den Code gibt, den du brauchst, um das Icon anzuzeigen. Du hast keine große Auswahl, aber sie funktionieren trotzdem gut und sind sehr leicht.
<span class="dashicons dashicons-admin-post"></span>Unten haben wir beispielsweise das Dashboard-Symbol in einen Gutenberg HTML-Block eingefügt.
Und so sieht das dann im Front End aus
Dashicons hat keine coolen Shortcodes damit, aber du kannst die Größe deiner Icons mit CSS anpassen. Hier ist ein Beispiel für das Einfügen eines Symbols direkt vor einer Überschrift.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Option 3 – Manuelle Verknüpfung mit Extern Gehosteten Icon Fonts
Die dritte Möglichkeit ist die manuelle Verknüpfung mit extern bereitgestellten Icon Fonts. Dies ist im Wesentlichen das, was das Plugin in Option 1 oben hinter den Kulissen tut.
Für Font Awesome kannst du den Code von der Startseite holen und dann die folgenden Schritte ausführen. Du kannst alle ihre Schriften kostenlos auf einem CDN hosten. Es wird ungefähr so aussehen:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Schritt 1
Kopiere den Code in den <head> jeder Vorlage oder Seite auf deiner WordPress-Seite, wo du Font Awesome verwenden möchtest. Du kannst die header.php-Datei deines Themes bearbeiten oder noch besser, folge unserem einfachen Tutorial, wie du Code zu deinem Header hinzufügen kannst.
Schritt 2
Du kannst dann damit beginnen, Icons in deinen HTML’s <body> zu platzieren. Finde das richtige Symbol und erfahre, wie du es auf deiner Seite einfügen kannst.
Performance-Probleme bei der Verwendung von Icon Fonts
Es ist zwar nichts falsch daran, eine der oben genannten Möglichkeiten zum Hinzufügen von Icon Fonts zu deiner Website zu verwenden, aber sie sind technisch nicht der beste Weg. Warum? Es geht nur um Leistungsprobleme.
Du Brauchst Wahrscheinlich Nicht alle Diese Icons.
Erstens, wenn du ein Plugin für Icon Fonts oder einen Link zu einer externen Symbolfontbibliothek verwendest, lädt es alle Symbole in seiner gesamten Bibliothek. Wenn du nur etwa 20 Symbole auf deiner gesamten Website verwendest, kann dies auf eine viel bessere Weise behandelt werden.
Zum Beispiel haben wir die Font Awesome 5 Bibliothek auf unserer Website integriert und während die CSS-Datei dafür klein ist, ist die Schriftdatei selbst 108 KB groß. Obwohl dies vielleicht nicht so groß erscheint, wirst du weiter unten sehen, wie klein die Datei tatsächlich wird, wenn wir nur die HTML-Schriften auswählen, die wir tatsächlich verwenden.
Das Laden von Einem CDN ist in der Regel Schneller.
Zweitens ist es nicht schlimm, Skripte von verschiedenen CDNs zu laden. Wenn du jedoch die Möglichkeit hast, es von einem CDN zu laden, ist dies in der Regel schneller. Warum? Weil es die Vorteile einer einzelnen HTTP/2-Verbindung nutzen kann und zusätzliche DNS-Lookups reduziert. Stelle einfach sicher, dass dein Haupt-CDN ein gutes ist!
Icon Fonts Lokal Hosten (Nur Die, Die Du Brauchst)
Aus den oben genannten Leistungsgründen werden wir dir zeigen, wie du deine Icon Fonts lokal hosten kannst und nur die verwenden kannst, die du brauchst. Unter lokal verstehen wir entweder das Laden vom Server deines WordPress Hosts oder deines eigenen CDN.
Wenn du nur die Icon Fonts auswählst, die du brauchst, kann dies die Dateigröße von 100 KB auf ein paar Kilobyte reduzieren, ziemlich praktisch! Noch besser: Du kannst sogar Icons aus verschiedenen Schriftarten kombinieren.
Die Grundlagen – Wie es Funktioniert
Bei der Verwendung eines Schriftsymbols wird die Schriftdatei (WOFF, WOFF 2, etc.) auf deinem Webserver bereitgestellt, dann wird die Schriftart mit CSS geladen und dann ein Markup erstellt, um die Symbole an der richtigen Stelle hinzuzufügen.
Während deine Website eine einzelne Datei lädt, wirst du am Ende tatsächlich eine Reihe von Dateiformaten für jede Schriftart haben, da einige Browser unterschiedliche Formate verwenden. Font Awesome verfügt über 6 verschiedene Dateiformate: EOT, SVG, TTF, WOFF, WOFF, WOFF 2 und OTF. Allerdings benötigt man aufgrund der Browserunterstützung eigentlich nur WOFF oder WOFF 2.
Tipp: WOFF wird von über 93% aller modernen Browser unterstützt. WOFF 2 ist jedoch stärker komprimiert, wird aber nur von 83%+ aller modernen Browser unterstützt. Wir empfehlen, das eine oder andere oder beides zu wählen. Der Browser bestimmt anhand deines Codes, welchen du an den Client liefern sollst.
Deine erste Aufgabe ist es, mit einem Werkzeug nur die gewünschten Symbole auszuwählen. Du kannst diese Dateien dann irgendwo in dein Projektverzeichnis aufnehmen, typischerweise in einem Schriftartenverzeichnis.
Als nächstes fügst du die Font Awesome CSS-Datei in dein Projekt ein und fügst sie mit einem normalen alten Link-Element zu deiner Website hinzu.
<link rel="stylesheet" href="css/font-awesome.min.css">Du könntest auch die CSS-Datei in die Warteschlange stellen oder, wenn sie klein ist, sie einfach inline verwenden.
Wenn du dir die CSS-Datei ansiehst, kannst du sehen, was im Hintergrund vor sich geht. Die Schriftartendateien werden geladen, das Grundelement mit der Klasse .fa wird definiert (zusammen mit einigen anderen), und schließlich wird jedes benannte Symbol definiert (z.B.:.fa-book).
Das Einzige, worauf du achten musst, ist der Pfad zu deinen Schriftdateien. Standardmäßig werden sie aus ../fonts geladen, das das Font-Verzeichnis ist, ein Ordner ab der aktuellen CSS-Datei. Möglicherweise musst du dies ändern, um deiner eigenen Verzeichnisstruktur zu entsprechen.
Jetzt, da du eine bessere Vorstellung davon hast, wie es funktioniert, werden wir eine Anleitung hinzufügen, wie du es Schritt für Schritt machen kannst. In diesem Beispiel verwenden wir eine Produktions-E-Commerce-Seite.
Schritt 1
Zuerst solltest du bestimmen, welche Schriftensymbolbibliothek du verwenden möchtest. Wir haben am Anfang dieses Artikels ein paar Dinge geteilt, die uns gefallen. In diesem Beispiel werden wir Font Awesome zusammen mit dem IcoMoon Schriftgenerator verwenden. Wenn du die WOFF 2 Dateien von IcoMoon haben möchtest, musst du eine einmalige Gebühr von $9,00 zahlen, um auf ihre Premium-Bibliothek zuzugreifen.
Du kannst die Font Awesome Icons, die du willst, manuell kostenlos herunterladen, aber du müsstest ein Tool wie FontForge verwenden, um ihre WOFF oder WOFF 2 Datei manuell zu bearbeiten. Bei uns dreht sich alles um Einfachheit, also benutzen wir einen Generator.
Schritt 2
Gehe zum IcoMoon-Generator. Wir klicken auf „Hinzufügen“ in der Font Awesome Bibliothek.
Schritt 3
Als nächstes solltest du die Symbole auswählen, die du auf deiner WordPress-Seite verwenden möchtest. Wenn du bereits Font Awesome verwendest und einfach auf lokal gehostete Versionen umsteigst, gehe durch und mache eine kurze Liste und wähle sie dann aus der Bibliothek.
In diesem Beispiel suchen wir Icons für perfmatters.io aus, eine WordPress E-Commerce-Seite, auf der Easy Digital Downloads läuft.
Schritt 4
Sobald du alle deine Icons ausgewählt hast, wähle „Schriftart generieren“ unten. Für diese Seite benötigten wir 20 Icons.
Du wirst am Ende Dateien haben, die so aussehen. Die wichtigsten, die du brauchst, sind die Datei style.css und die Schriftartendateien (WOFF, WOFF 2).
Schritt 5
Als nächstes wird empfohlen, dass du eine Suche und ein Ersetzen in der style.css durchführst, bevor du sie hochlädst oder auf deine Website kopierst. Hier ist, wie das Original aussieht.
Für diejenigen unter euch, die Font Awesome bereits verwenden, ist es einfach einfacher, die Klassen auf Font Awesome umzustellen, so dass, wenn etwas bereits auf deiner WordPress-Seite damit kodiert war, es automatisch mit den Symbolen beginnt.
Führe also eine Suche nach dem „Icon“ durch und ersetze alle Ereignisse durch „fa“. Du solltest in der Lage sein, eine Schnellsuche durchzuführen und mit einem Texteditor wie Sublime zu ersetzen.
Dies ersetzt [class^="icon-"], [class*=" icon-"] durch [class^="fa-"], [class*=" fa-"]. Es repariert auch jeden Icon, also anstatt mit .icon- zu beginnen, beginne nun mit .fa-.
Möglicherweise musst du auch die Quell-URL ändern, je nachdem, wo du deine Schriftdateien unten in Schritt 7 hochlädst. Wir empfehlen, die URL in deinem CDN zu ändern.
Schritt 6
Als nächstes musst du das CSS zu deiner Website hinzufügen. Es gibt ein paar Möglichkeiten, wie du das machen kannst.
Option 1
Da die Menge an CSS sehr gering ist, kannst du das gesamte CSS der Datei kopieren und in den WordPress Customizer einfügen. Dies sollte niemals für große Dateien durchgeführt werden, aber das ist eine relativ geringe Menge an CSS. Das bedeutet, dass es inline auf deiner Seite geladen wird.
Option 2
Du kannst auf dein Stylesheet manuell verlinken, indem du es in den Header deiner WordPress-Seite setzt. Tipp: Verlinke es auf deinem eigenen CDN für eine schnellere Leistung.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Option 3
Du kannst die CSS-Datei auch in WordPress in eine Warteschlange stellen. Der Prozess ist dem manuellen Weg sehr ähnlich. Füge Folgendes zur Datei functions.php deines Themes hinzu, oder benutze das kostenlose Code Snippets Plugin. Möglicherweise musst du das Verzeichnis ändern, je nachdem, wo du es hochlädst.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Schritt 7
Jetzt, da du das CSS zu deiner Website hinzugefügt hast, ist es an der Zeit, die Schriftdateien hochzuladen. Du kannst die Schriften überall platzieren, ein Ordner namens „Schriften“ in deinem /public direkt ist in Ordnung. Denke jedoch daran, dass der Quellordner in deiner style.css-Datei übereinstimmen muss.
Schritt 8
Nun sollte deine WordPress-Seite sowohl deine CSS- als auch deine Schriftdateien zugänglich machen. Als nächstes kannst du also deiner Website einen Markup hinzufügen. Dies ist nur ein Beispiel für das Hinzufügen eines Zahnradsymbols.
<i class="fa fa-cog"></i>Ein Live-Beispiel dafür findet ihr unter perfmatters.io. Denke daran, dass du jedes Element verwenden kannst, nicht nur i. Du kannst auch normale span-nelemente verwenden, zusätzlich zu CSS zu deinen benutzerdefinierten Klassen.
Der eigentliche Unterschied ist, wenn man sich den Größenunterschied ansieht. Denke daran, als wir mit der externen Bibliothek Font Awesome verlinkt haben, betrug die Gesamtgröße der Schriftdatei 108 KB. Nachdem wir einen Schriftgenerator verwendet und nur die Font Awesome Icons ausgewählt hatten, die wir für die Seite benötigten, wurde die Schriftdatei auf 2,6 KB heruntergesetzt. Unsere Schriftdatei hat sich um satte 97,59% verkleinert!
Nicht nur das, sondern es wird jetzt auch von unserem CDN geladen, was bedeutet, dass es keine zusätzlichen DNS-Lookups auf fontawesome.com gibt.
Du kannst diesen Ansatz auch mit SVG-Symbolen verwenden, er ist nur etwas anders.
Bedenken Bezüglich der Barrierefreiheit Durch Icon Fonts
Ein Nachteil von Icon Fonts ist ihre schreckliche Zugänglichkeit. Screenreader können sie überspringen, oder schlimmer noch, den Unicode oder das Zeichen selbst lesen. Dies würde dazu führen, dass Sehbehinderte beim Betrachten deines Favoritenmenüpunktes „Gelber Stern“ hören – nicht ideal. Sie sollten auch berücksichtigen, was passiert, wenn die Schriften nicht geladen werden.
Im Idealfall sollten dekorative Symbole einfach verschwinden, wenn sie nicht geladen sind, und kritische Symbole sollten durch Text ersetzt werden, wenn es ein Problem gibt.
Das Problem der Barrierefreiheit ist ziemlich einfach zu lösen, verwende einfach den Parameter aria-hidden="true" und den Wert, um den Screenreadern anzuzeigen, dass sie unser Element wegwerfen sollten.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesIn einer vollständigeren Implementierung kannst du Modernizr auch verwenden, um die Unterstützung für Schriftarten zu testen. Du musst das CSS leicht modifizieren, siehe den ausgezeichneten Artikel über Bulletproof Font Icons für weitere Informationen.
Für Informationen über das Erstellen kritischer Symbole mit Textrückgriff empfehlen wir auch, den obigen Artikel zu lesen, sie haben das Problem so gut wie möglich erklärt und gelöst, aber die Implementierung ist etwas außerhalb des Umfangs dieses Artikels.
Zusammenfassung
Das ist alles, was es an Icon Fonts gibt. Jetzt kennst du ein paar verschiedene Möglichkeiten, um Icon Fonts auf deiner WordPress-Seite einfach zu bekommen, entlang des besten Weges, sie zu implementieren, wenn es um die Leistung geht.
Wir empfehlen immer, einen Schriftgenerator zu verwenden, um eine Symbolschriftart zu erstellen, die nur aus den von dir verwendeten Symbolen besteht. Dadurch wird Ihr Theme deutlich schlanker! Wenn du eine Lieblingsbibliothek oder einen Generator hast, den wir nicht erwähnt haben, lass es uns bitte wissen. Es gibt eine ganze Reihe guter Leute da draußen! Lesen Sie auch unsere ausführliche Anleitung zu WordPress-Schriften.
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar