Wo finde ich Icon Fonts?<\/h2>\n
Es gibt viele tolle Orte, an denen du jetzt Icon Fonts f\u00fcr deine WordPress-Seite finden kannst. Gib einfach „icon font“ in Google ein, um gro\u00dfartige Resultate zu erhalten. Eine der beliebtesten und am h\u00e4ufigsten verwendeten ist Font Awesome<\/a>. 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\u00e4lt Icons f\u00fcr fast alles, von der Benutzeroberfl\u00e4che bis hin zu sozialen Symbolen, Pfeilen und vielen anderen Arten von Symbolen.<\/p>\n Hier sind noch ein paar andere, die du dir ansehen kannst:<\/p>\n Zuerst werden wir auf einige der schnellen und einfachen M\u00f6glichkeiten 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 \u00fcber die beste Methode<\/a> zu springen.<\/p>\n Der schnellste Weg, um mit WordPress-Icon Fonts zu arbeiten, ist die einfache Verwendung eines Plugins eines Drittanbieters. Das kostenlose Font Awesome Integration Plugin<\/a> enth\u00e4lt die neueste Font Awesome 5 Symbolbibliothek. Nachdem du es installiert und aktiviert hast, gen\u00fcgt ein einfacher Shortcode, um ein Symbol einzuf\u00fcgen. Sie haben jetzt sogar ein WordPress-Symbol! Ziemlich cool.<\/p>\n Du kannst dir die grundlegende Gebrauchsanweisung<\/a> von Font Awesome 5 ansehen, um zus\u00e4tzliche M\u00f6glichkeiten zu finden, sie zu verwenden und anzupassen, sowie deren Icon-Bibliothek. Zum Beispiel haben wir unten das WordPress Font Awesome Symbol in einen Gutenberg<\/a> Shortcode-Block eingef\u00fcgt und So sieht es auf dem Frontend aus. Ziemlich einfach, oder? Wir hatten ein Font Awesome Icon auf unserer Website innerhalb weniger Minuten eingerichtet.<\/p>\n Wenn du viele einfach zu bedienende Shortcodes m\u00f6chtest, solltest du dir vielleicht auch das Shortcodes Ultimate Plugin<\/a> ansehen. Sie haben ein Premium-Icon-Add-on, das du verwenden kannst.<\/p>\n Das oben genannte ist eine gro\u00dfartige L\u00f6sung, wenn du deine Kunden Icons zu Beitr\u00e4gen oder Seiten hinzuf\u00fcgen lassen m\u00f6chtest, aber wenn du diese Elemente innerhalb deines Themes oder Plugins verwenden m\u00f6chtest, ist es am besten, sie selbst in eine Reihe zu stellen (wird weiter unten darauf eingehen).<\/p>\n Dashicons<\/a> ist eine Reihe von Icon Fonts, die standardm\u00e4\u00dfig 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\u00fcr WordPress verf\u00fcgbar.<\/p>\n Du kannst folgendes zu deiner Du kannst dann auf die Dashicons Website<\/a> gehen, ein Symbol ausw\u00e4hlen und auf den Link „HTML kopieren“ klicken, der dir den Code gibt, den du brauchst, um das Icon anzuzeigen. Du hast keine gro\u00dfe Auswahl, aber sie funktionieren trotzdem gut und sind sehr leicht.<\/p>\n Unten haben wir beispielsweise das Dashboard-Symbol in einen Gutenberg<\/a> HTML-Block eingef\u00fcgt.<\/p>\n Und so sieht das dann im Front End aus<\/p>\n Dashicons hat keine coolen Shortcodes damit, aber du kannst die Gr\u00f6\u00dfe deiner Icons mit CSS<\/a> anpassen. Hier ist ein Beispiel f\u00fcr das Einf\u00fcgen eines Symbols direkt vor einer \u00dcberschrift.<\/p>\n Die dritte M\u00f6glichkeit ist die manuelle Verkn\u00fcpfung mit extern bereitgestellten Icon Fonts. Dies ist im Wesentlichen das, was das Plugin in Option 1 oben hinter den Kulissen tut.<\/p>\n F\u00fcr Font Awesome kannst du den Code von der Startseite<\/a> holen und dann die folgenden Schritte ausf\u00fchren. Du kannst alle ihre Schriften kostenlos auf einem CDN<\/a> hosten. Es wird ungef\u00e4hr so aussehen:<\/p>\n Schritt 1 Kopiere den Code in den Schritt 2 Du kannst dann damit beginnen, Icons in deinen HTML’s Es ist zwar nichts falsch daran, eine der oben genannten M\u00f6glichkeiten zum Hinzuf\u00fcgen von Icon Fonts zu deiner Website zu verwenden, aber sie sind technisch nicht der beste Weg. Warum? Es geht nur um Leistungsprobleme<\/strong>.<\/p>\n Erstens, wenn du ein Plugin f\u00fcr Icon Fonts oder einen Link zu einer externen Symbolfontbibliothek verwendest, l\u00e4dt 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.<\/p>\n\n Zum Beispiel haben wir die Font Awesome 5 Bibliothek auf unserer Website integriert und w\u00e4hrend die CSS-Datei daf\u00fcr klein ist, ist die Schriftdatei selbst 108 KB gro\u00df. Obwohl dies vielleicht nicht so gro\u00df erscheint, wirst du weiter unten sehen, wie klein die Datei tats\u00e4chlich wird, wenn wir nur die HTML-Schriften<\/a> ausw\u00e4hlen, die wir tats\u00e4chlich verwenden.<\/p>\n Zweitens ist es nicht schlimm, Skripte von verschiedenen CDNs zu laden. Wenn du jedoch die M\u00f6glichkeit hast, es von einem CDN zu laden, ist dies in der Regel schneller. Warum? Weil es die Vorteile einer einzelnen HTTP\/2<\/a>-Verbindung nutzen kann und zus\u00e4tzliche DNS-Lookups<\/a> reduziert. Stelle einfach sicher, dass dein Haupt-CDN ein gutes ist!<\/p>\n Aus den oben genannten Leistungsgr\u00fcnden 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.<\/p>\n Wenn du nur die Icon Fonts ausw\u00e4hlst, die du brauchst, kann dies die Dateigr\u00f6\u00dfe von 100 KB auf ein paar Kilobyte reduzieren<\/strong>, ziemlich praktisch! Noch besser: Du kannst sogar Icons aus verschiedenen Schriftarten kombinieren.<\/p>\n Bei der Verwendung eines Schriftsymbols wird die Schriftdatei (WOFF, WOFF 2, etc.) auf deinem Webserver bereitgestellt, dann wird die Schriftart mit CSS<\/a> geladen und dann ein Markup erstellt, um die Symbole an der richtigen Stelle hinzuzuf\u00fcgen.<\/p>\n W\u00e4hrend deine Website eine einzelne Datei l\u00e4dt, wirst du am Ende tats\u00e4chlich eine Reihe von Dateiformaten f\u00fcr jede Schriftart haben, da einige Browser unterschiedliche Formate verwenden. Font Awesome verf\u00fcgt \u00fcber 6 verschiedene Dateiformate: EOT, SVG, TTF, WOFF, WOFF, WOFF 2 und OTF. Allerdings ben\u00f6tigt man aufgrund der Browserunterst\u00fctzung eigentlich nur WOFF oder WOFF 2.<\/p>\n Tipp: WOFF wird von \u00fcber 93% aller modernen Browser unterst\u00fctzt<\/a>. WOFF 2 ist jedoch st\u00e4rker komprimiert, wird aber nur von 83%+ aller modernen Browser unterst\u00fctzt<\/a>. Wir empfehlen, das eine oder andere oder beides zu w\u00e4hlen. Der Browser bestimmt anhand deines Codes, welchen du an den Client liefern sollst.<\/p>\n Deine erste Aufgabe ist es, mit einem Werkzeug nur die gew\u00fcnschten Symbole auszuw\u00e4hlen. Du kannst diese Dateien dann irgendwo in dein Projektverzeichnis aufnehmen, typischerweise in einem Schriftartenverzeichnis.<\/p>\n Als n\u00e4chstes f\u00fcgst du die Font Awesome CSS-Datei in dein Projekt ein und f\u00fcgst sie mit einem normalen alten Link-Element zu deiner Website hinzu.<\/p>\n Du k\u00f6nntest auch die CSS-Datei in die Warteschlange stellen oder, wenn sie klein ist, sie einfach inline verwenden.<\/p>\n 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 Das Einzige, worauf du achten musst, ist der Pfad zu deinen Schriftdateien. Standardm\u00e4\u00dfig werden sie aus Jetzt, da du eine bessere Vorstellung davon hast, wie es funktioniert, werden wir eine Anleitung hinzuf\u00fcgen, wie du es Schritt f\u00fcr Schritt machen kannst. In diesem Beispiel verwenden wir eine Produktions-E-Commerce-Seite.<\/p>\n Zuerst solltest du bestimmen, welche Schriftensymbolbibliothek du verwenden m\u00f6chtest. Wir haben am Anfang dieses Artikels ein paar Dinge geteilt, die uns gefallen. In diesem Beispiel werden wir Font Awesome zusammen mit dem IcoMoon<\/a> Schriftgenerator verwenden. Wenn du die WOFF 2 Dateien von IcoMoon haben m\u00f6chtest, musst du eine einmalige Geb\u00fchr von $9,00 zahlen, um auf ihre Premium-Bibliothek zuzugreifen.<\/p>\n Du kannst die Font Awesome Icons, die du willst, manuell kostenlos herunterladen, aber du m\u00fcsstest ein Tool wie FontForge<\/a> verwenden, um ihre WOFF oder WOFF 2 Datei manuell zu bearbeiten. Bei uns dreht sich alles um Einfachheit, also benutzen wir einen Generator.<\/p>\n Gehe zum IcoMoon-Generator<\/a>. Wir klicken auf „Hinzuf\u00fcgen“ in der Font Awesome Bibliothek.<\/p>\n Als n\u00e4chstes solltest du die Symbole ausw\u00e4hlen, die du auf deiner WordPress-Seite verwenden m\u00f6chtest. Wenn du bereits Font Awesome verwendest und einfach auf lokal gehostete Versionen umsteigst, gehe durch und mache eine kurze Liste und w\u00e4hle sie dann aus der Bibliothek.<\/p>\n In diesem Beispiel suchen wir Icons f\u00fcr perfmatters.io<\/a> aus, eine WordPress E-Commerce-Seite, auf der Easy Digital Downloads l\u00e4uft.<\/p>\n Sobald du alle deine Icons ausgew\u00e4hlt hast, w\u00e4hle „Schriftart generieren“ unten. F\u00fcr diese Seite ben\u00f6tigten wir 20 Icons.<\/p>\n Du wirst am Ende Dateien haben, die so aussehen. Die wichtigsten, die du brauchst, sind die Datei Als n\u00e4chstes wird empfohlen, dass du eine Suche und ein Ersetzen in der F\u00fcr 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.<\/p>\n F\u00fchre also eine Suche nach dem „Icon“ durch und ersetze alle Ereignisse durch „fa“. Du solltest in der Lage sein, eine Schnellsuche durchzuf\u00fchren und mit einem Texteditor wie Sublime<\/a> zu ersetzen.<\/p>\n Dies ersetzt M\u00f6glicherweise musst du auch die Quell-URL \u00e4ndern, je nachdem, wo du deine Schriftdateien unten in Schritt 7 hochl\u00e4dst. Wir empfehlen, die URL in deinem CDN zu \u00e4ndern.<\/strong><\/p>\n Als n\u00e4chstes musst du das CSS zu deiner Website hinzuf\u00fcgen. Es gibt ein paar M\u00f6glichkeiten, wie du das machen kannst.<\/p>\n Option 1 Da die Menge an CSS sehr gering ist, kannst du das gesamte CSS der Datei kopieren und in den WordPress Customizer einf\u00fcgen. Dies sollte niemals f\u00fcr gro\u00dfe Dateien durchgef\u00fchrt werden, aber das ist eine relativ geringe Menge an CSS. Das bedeutet, dass es inline auf deiner Seite geladen wird.<\/p>\n Option 2<\/strong><\/p>\n 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\u00fcr eine schnellere Leistung.<\/p>\n Option 3<\/strong><\/p>\n Du kannst die CSS-Datei auch in WordPress in eine Warteschlange stellen. Der Prozess ist dem manuellen Weg sehr \u00e4hnlich. F\u00fcge Folgendes zur Datei Jetzt, da du das CSS zu deiner Website hinzugef\u00fcgt hast, ist es an der Zeit, die Schriftdateien hochzuladen. Du kannst die Schriften \u00fcberall platzieren, ein Ordner namens „Schriften“ in deinem \/public direkt ist in Ordnung. Denke jedoch daran, dass der Quellordner in deiner Nun sollte deine WordPress-Seite sowohl deine CSS- als auch deine Schriftdateien zug\u00e4nglich machen. Als n\u00e4chstes kannst du also deiner Website einen Markup hinzuf\u00fcgen. Dies ist nur ein Beispiel f\u00fcr das Hinzuf\u00fcgen eines Zahnradsymbols.<\/p>\n Ein Live-Beispiel daf\u00fcr findet ihr unter perfmatters.io. Denke daran, dass du jedes Element verwenden kannst, nicht nur Der eigentliche Unterschied ist, wenn man sich den Gr\u00f6\u00dfenunterschied ansieht. Denke daran, als wir mit der externen Bibliothek Font Awesome verlinkt haben, betrug die Gesamtgr\u00f6\u00dfe der Schriftdatei 108 KB. Nachdem wir einen Schriftgenerator verwendet und nur die Font Awesome Icons ausgew\u00e4hlt hatten, die wir f\u00fcr die Seite ben\u00f6tigten, wurde die Schriftdatei auf 2,6 KB heruntergesetzt. Unsere Schriftdatei hat sich um satte 97,59% verkleinert!<\/strong><\/p>\n Nicht nur das, sondern es wird jetzt auch von unserem CDN geladen, was bedeutet, dass es keine zus\u00e4tzlichen DNS-Lookups<\/strong> auf fontawesome.com gibt.<\/p>\n\n Du kannst diesen Ansatz auch mit SVG-Symbolen verwenden, er ist nur etwas anders.<\/p>\n Ein Nachteil von Icon Fonts ist ihre schreckliche Zug\u00e4nglichkeit<\/a>. Screenreader k\u00f6nnen sie \u00fcberspringen, oder schlimmer noch, den Unicode oder das Zeichen selbst lesen. Dies w\u00fcrde dazu f\u00fchren, dass Sehbehinderte beim Betrachten deines Favoritenmen\u00fcpunktes „Gelber Stern“ h\u00f6ren – nicht ideal. Sie sollten auch ber\u00fccksichtigen, was passiert, wenn die Schriften nicht geladen werden.<\/p>\n 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.<\/p>\n Das Problem der Barrierefreiheit ist ziemlich einfach zu l\u00f6sen, verwende einfach den Parameter In einer vollst\u00e4ndigeren Implementierung kannst du Modernizr auch verwenden, um die Unterst\u00fctzung f\u00fcr Schriftarten zu testen. Du musst das CSS leicht modifizieren, siehe den ausgezeichneten Artikel \u00fcber Bulletproof Font Icons<\/a> f\u00fcr weitere Informationen.<\/p>\n F\u00fcr Informationen \u00fcber das Erstellen kritischer Symbole mit Textr\u00fcckgriff empfehlen wir auch, den obigen Artikel zu lesen, sie haben das Problem so gut wie m\u00f6glich erkl\u00e4rt und gel\u00f6st, aber die Implementierung ist etwas au\u00dferhalb des Umfangs dieses Artikels.<\/p>\n Das ist alles, was es an Icon Fonts gibt. Jetzt kennst du ein paar verschiedene M\u00f6glichkeiten, um Icon Fonts auf deiner WordPress-Seite einfach zu bekommen, entlang des besten Weges, sie zu implementieren, wenn es um die Leistung geht.<\/p>\n![\"Font](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/font-awesome-icons.png\"){kind=icon}
\n
Schnelle und Einfache M\u00f6glichkeiten zur Verwendung von WordPress Icon Fonts<\/h2>\n
Option 1 – Ein WordPress-Plugin Verwenden<\/h3>\n
fa-3x<\/code> hinzugef\u00fcgt, um es dreimal gr\u00f6\u00dfer zu machen.<\/p>\n[fawesome iclass=\"fab fa-wordpress fa-3x\"]<\/code><\/pre>\n![\"Font](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/gutenberg-font-awesome-shortcode.png\")
![\"Font](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/font-awesome-wordpress-5.0.png\")
Option 2 – Verwendung der Eingebauten Dashicons<\/h3>\n
functions.php<\/code> Datei hinzuf\u00fcgen, oder wir empfehlen die Verwendung eines kostenlosen Plugins wie Code Snippets<\/a>. Dies minimiert das Risiko, dass du dein Theme besch\u00e4digst, und die \u00c4nderungen werden auch w\u00e4hrend der Aktualisierung des Themes bestehen bleiben.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'dashicons' );\n}<\/code><\/pre>\n<span class=\"dashicons dashicons-admin-post\"><\/span><\/code><\/pre>\n![\"Dashicons](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/gutenberg-dashicons.png\")
![\"Beispiel](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/dashicons-wordpress.png\")
<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\nOption 3 – Manuelle Verkn\u00fcpfung mit Extern Gehosteten Icon Fonts<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.5.0\/css\/all.css\" integrity=\"sha384-xxxxx\" crossorigin=\"anonymous\"><\/code><\/pre>\n
\n<\/strong><\/p>\n<head><\/code> jeder Vorlage oder Seite auf deiner WordPress-Seite, wo du Font Awesome verwenden m\u00f6chtest. Du kannst die header.php<\/code>-Datei deines Themes bearbeiten oder noch besser, folge unserem einfachen Tutorial, wie du Code zu deinem Header hinzuf\u00fcgen kannst.<\/a><\/p>\n
\n<\/strong><\/p>\n<body><\/code> zu platzieren. Finde das richtige Symbol<\/a> und erfahre, wie du es auf deiner Seite einf\u00fcgen<\/a> kannst.<\/p>\nPerformance-Probleme bei der Verwendung von Icon Fonts<\/h2>\n
Du Brauchst Wahrscheinlich Nicht alle Diese Icons.<\/h3>\n
![\"Gro\u00dfe](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/grobe-font-awesome-bibliothek.png\")
Das Laden von Einem CDN ist in der Regel Schneller.<\/h3>\n
Icon Fonts Lokal Hosten (Nur Die, Die Du Brauchst)<\/h2>\n
Die Grundlagen – Wie es Funktioniert<\/h3>\n
<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"><\/code><\/pre>\n.fa<\/code> wird definiert (zusammen mit einigen anderen), und schlie\u00dflich wird jedes benannte Symbol definiert (z.B.:.fa-book).<\/p>\n..\/fonts<\/code> geladen, das das Font-Verzeichnis ist, ein Ordner ab der aktuellen CSS-Datei. M\u00f6glicherweise musst du dies \u00e4ndern, um deiner eigenen Verzeichnisstruktur zu entsprechen.<\/p>\nSchritt 1<\/h3>\n
Schritt 2<\/h3>\n
![\"IcoMoon](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/icomoon-font-awesome-bibliothek.png\")
Schritt 3<\/h3>\n
![\"W\u00e4hle](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/wahle-deine-font-awesome-icons-1.png\"){kind=icon}
Schritt 4<\/h3>\n
![\"Font](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/font-awesome-icons-icomoon-export.png\"){kind=icon}
style.css<\/code> und die Schriftartendateien (WOFF, WOFF 2).<\/p>\n![\"Icon](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/font-files.png\")
Schritt 5<\/h3>\n
style.css<\/code> durchf\u00fchrst, bevor du sie hochl\u00e4dst oder auf deine Website kopierst. Hier ist, wie das Original aussieht.<\/p>\n![\"IcoMoon](\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/10\/icomoon-css-file.png\")
![\"Suchen](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/suchen-ersetzen-sublime.png\")
[class^=\"icon-\"], [class*=\" icon-\"]<\/code> durch [class^=\"fa-\"], [class*=\" fa-\"]<\/code>. Es repariert auch jeden Icon, also anstatt mit .icon-<\/code> zu beginnen, beginne nun mit .fa-<\/code>.<\/p>\nSchritt 6<\/h3>\n
\n<\/strong><\/p>\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.yourdomain.com\/fonts\/style.css\"><\/code><\/pre>\nfunctions.php<\/code> deines Themes hinzu, oder benutze das kostenlose Code Snippets Plugin<\/a>. M\u00f6glicherweise musst du das Verzeichnis \u00e4ndern, je nachdem, wo du es hochl\u00e4dst.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '\/css\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_styles' );<\/code><\/pre>\nSchritt 7<\/h3>\n
style.css<\/code>-Datei \u00fcbereinstimmen muss.<\/p>\n![\"Icon](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/icon-font-datei-sftp.png\"){kind=icon}
Schritt 8<\/h3>\n
<i class=\"fa fa-cog\"><\/i><\/code><\/pre>\ni<\/code>. Du kannst auch normale span<\/code>-nelemente verwenden, zus\u00e4tzlich zu CSS zu deinen benutzerdefinierten Klassen.<\/p>\n![\"Font](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/font-awesome-example-perfmatters.png\")
![\"Gr\u00f6\u00dfe](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/10\/grobe-der-woff2-font-awesome-datei.png\")
Bedenken Bez\u00fcglich der Barrierefreiheit Durch Icon Fonts<\/h2>\n
aria-hidden=\"true\"<\/code> und den Wert, um den Screenreadern anzuzeigen, dass sie unser Element wegwerfen sollten.<\/p>\n<span class=\"icon icon-star\" aria-hidden=\"true\"><\/span> My Favourites<\/code><\/pre>\nZusammenfassung<\/h2>\n