Internetkurse Köln

Manche Beiträge auf diesem Blog sind mittlerweile reichlich in die Jahre gekommen. So zum Beispiel auch jener, der sich mit dem Markieren von externen Links mit einem entsprechenden Icon beschäftigt. Das Theme, das ich damals zur Grundlage genommen hatte – Twenty Sixteen – brachte den dafür nötigen Icons Font bereits mit. Was aber, wenn Sie ein Theme benutzen, das dies nicht tut? Zum Beispiel eines der letzten drei Standardthemes Twenty Nineteen / Twenty / Twenty-One? Dieser Beitrag beschäftigt sich nun damit, wie Sie in WordPress eigene Icons einfügen und dann auch an entsprechender Stelle nutzen können.

Vorüberlegungen zum Einfügen eigener Icons

a) Aspekte des Datenschutzes

Grundsätzlich gibt es nicht nur unterschiedliche Icons Fonts. Es gibt auch unterschiedliche Wege, diese auf Ihre Website zu bringen. Wesentlich ist erst einmal zu verstehen, dass so ein Icons Fonts nichts mit dem Schriftfont zu tun hat, den Sie auf Ihrer Website nutzen. Woher der auch immer stammt, der Schriftfont ist nur für Buchstaben, Ziffern und eine gewisse Menge an Sonderzeichen zuständig. Wir sprechen hier aber von kleinen Bildchen, die technisch gesehen keine Bilder, sondern ebenfalls ein Font (Zeichensatz) sind. In dem Fall ein Icons Font.

Dieser Icons Font kann nun, genauso wie Ihr Schriftfont, von einem externen Server kommen – oder von Ihrem eigenen.

Disclaimer: Ich bin keine Juristin. Nennen Sie alles Folgende also bestenfalls »educated guess« (begründete Vermutung), betrachten Sie es aber keinesfalls als Rechtsberatung.

Bereits seit der DSGVO gilt, dass die stete Verbindung zu einer externen Quelle mit Vorsicht zu genießen ist. Immerhin werden hierbei die IP-Adressen Ihrer Nutzer/innen übertragen – und das, ohne dass Sie diese zuvor gefragt hätten, ob das so okay für sie ist. Spätestens seit letzten Herbst, da auch noch der sogenannte Pricacy Shield gekippt ist und es (noch?) keine neue Vereinbarung mit Ländern fern der EU gibt, sollte man sich von der Nutzung externer Schriftarten verabschieden.

Darauf, was man beachten sollte, wenn man Google Fonts selbst hosten will, bin ich schon einmal eingegangen. Aber das Ganze betrifft eben nicht nur Google Fonts, sondern auch Icons Fonts wie zum Beispiel den beliebten Font Awesome. Für alle gilt: Natürlich kann man sie noch nutzen. Man sollte sie nur selbst ausliefern.

b) Schnelles Ausliefern

Wenn man die eingesetzten Fonts nun selbst hostet, sollte die Auslieferung möglichst fix vonstattengehen. Ist der Server zu lahm und / oder die Datenverbindung zu schlecht, versucht das Nutzergerät erst einmal die Darstellung des Textes per Default-Schrift. Bei sans serif wäre dies Arial – bis der Server den eigentlichen Font geliefert hat. Für den verwendeten Icons Fonts gibt es aber keine Default-Variante. Hier entsteht dann vorübergehend ein sogenannter Tofu. Also ein kleines Quadrat, das anzeigt, dass hier ein Zeichen nicht dargestellt werden konnte. Da hilft dann übrigens auch nicht der NOTO Font, der ja für No Tofu steht.

Damit das nicht passiert, sollte also Ihr Server keine lahme Ente und der benutzte Font nicht größer als nötig sein. In Hinblick auf den Schriftfont bieten sich nur bedingt Möglichkeiten der Verkleinerung. Wenn Sie aber in WordPress eigene Icons einfügen, können Sie diese überschaubar halten. Wozu mehr Icons ausliefern als genau jene, die Sie konkret brauchen?

Mit Icomoon einen Icons Font erstellen

Neben dem allseits bekannten Font Awesome gibt es noch eine Reihe weiterer Icons Font Anbieter. Irgendwann bin ich mal über Icomoon gestolpert – und dabei geblieben. Mit anderen Worten: Ich war zufrieden und sah keinen Grund mehr, weitere auszuprobieren. Weshalb ich nun also auch nur über diesen Anbieter zu erzählen weiß.

Meine Zufriedenheit hat viel damit zu tun, dass Icomoon die Möglichkeit bietet, aus dem Set der freien Icons jene auszuwählen, die man tatsächlich braucht. Die Selektion erfolgt einfach per Klick auf die benötigten Icons. Hat man alle beisammen, klickt man unten rechts auf den »Generate Font« Button. Somit erhält man einen sehr übersichtlichen Icons Font, den man dann in WordPress einfügen kann.

In meinem Bespiel besteht der Font tatsächlich nur aus drei Icons:

• new-tab [\ea7e] für externe Links
  (alternativ, wenn nicht in neuem Tab: share [\ea7d])
• file-pdf [\eadf] für Links zu PDF-Dateien
• folder [\e92f] für Links zu Kategorie-Archiven

Icomoon Icons in WordPress einfügen

Die zip-Datei, die man nach Generieren des Fonts erhält, beinhaltet allerlei. Vor allem ist es aber das fonts-Verzeichnis und die style.css, dem die Aufmerksamkeit gelten sollte. Eine Lizenz ist übrigens nicht dabei. Die freien Icomoon Icons unterliegen der Creative Commons Lizenz CC BY 4.0 (Namensnennung). Extrem verkürzt bedeutet dies: Sie dürfen die Icons selbst veröffentlichen und auch bearbeiten, sollten nur den Urheber nennen und einen Link auf die Lizenz veröffentlichen.

Das font-Verzeichnis beinhaltet nun alle Dateien, die Sie brauchen, um die von Ihnen ausgewählten Icons auf Ihrer Website nutzen zu können. Deshalb müssen Sie dieses Verzeichnis auf Ihren Server hochladen. Das machen Sie mit einem FTP-Programm wie Filezilla.

Haben Sie sich mit Ihrem Server per FTP verbunden, navigieren Sie zu: …/wordpress/wp-content/themes/IHR-CHILDTHEME/

Dabei stehen die drei Pünktchen für Ihr Startverzeichnis (meist heißt dies »html«) auf Ihrem Server sowie für das Unterverzeichnis, in dem die Installation liegt.

IHR-CHILDTHEME macht deutlich, dass Sie für diese Aktion bestenfalls tatsächlich ein Childtheme angelegt haben. Wenngleich ich vermute, dass Ihr neues fonts-Verzeichnis ein Update des Themes überleben könnte. Im Zweifel müssten Sie es sonst nach dem Theme-Update wieder hochladen.

Hat Ihr Theme bereits ein fonts-Verzeichnis, können Sie die einzelnen Icomoon-Dateien dort auch hineinkopieren. Sie können auch den Namen des neuen fonts-Verzeichnisses umbenennen. Dann allerdings müssen Sie auch die Pfade in den CSS-Angaben, die Icomoon Ihnen mitgeliefert hat, entsprechend anpassen.

Die CSS-Angaben für den Icomoon Font

Nun haben Sie den ersten Schritt zum Einfügen Ihres eigenen Icons Fonts in WordPress erledigt. Jetzt müssen Sie nur noch Ihrem Theme davon erzählen. Das machen Sie, indem Sie die CSS-Angaben, die in der mitgelieferten style.css stehen, in die style.css Ihres Childthemes kopieren. Wichtig sind hier vor allem die @font-face Angaben. Ohne diese weiß Ihr Theme nichts von den Font-Dateien, die Sie zuvor auf den Server geladen haben.

Sie haben kein Childtheme? Dann kopieren Sie die Angaben in das Zusätzliche CSS Ihres Themes. Das funktioniert im WordPress Backend über Design > Customizer > Zusätzliches CSS.

Ansonsten gelten im Wesentlichen noch immer die Angaben, wie ich Sie 2016 bereits veröffentlicht habe. Dies gilt vor allem für die externen Links. Allein haben wir es nun mit einem anderen Font zu tun, dessen einzelne Icons andere Namen tragen. Die sind also auf jeden Fall anzupassen. Hier aber auch noch die Definitionen für Links, die zu PDFs oder zu Kategorie-Archiven führen.

Für meinen kleinen Icons Font lauten die Angaben wie folgt:

a) externe Links

.entry-content a[href^="http://"]:not([href="https://IHRE-DOMAIN.de"]):before, .entry-content a[href^="https://"]:not([href="https://IHRE-DOMAIN.de"]):before
{
font-family: 'icomoon' !important;
font-size:0.9em;
content: "\ea7e";
letter-spacing:5px;
}

b) PDF-Links

a[href$=".pdf"]:before {
font-family: 'icomoon' !important;
font-size:0.9em;
content: "\eadf";
letter-spacing:5px;
}

c) Links zu Kategorie-Archiven

.entry-content a[href*="https://IHRE-DOMAIN.de/category/"]:before
{
font-family: 'icomoon' !important;
font-size:0.9em;
content: "\e92f";
letter-spacing:5px;
}

Wenn Sie den Platzhalter »IHRE-DOMAIN« passend ersetzt haben, sollte das entsprechende Icon vor jedem Link erscheinen, der zu einem Ziel fern Ihrer Website führt. Links zu PDFs zeigen ebenso automatisch das passende Icon wie Links zu Kategorie-Archiven. Und das Ganze funktioniert auf jeden Fall mit den letzten drei Standardthemes Twenty Nineteen / Twenty / Twenty-One.

Sollten Sie hingegen doch nur Tofus sehen, stimmt mit Ihren Pfaden irgendetwas nicht.

---

Beitragsbild: Britta Kretschmer, auf Basis dreier Icomoon Icons