Icons zum Social Media Menü hinzufügen, mithilfe von href styling

Gerade jetzt in der Zeit wo viele Mastodon ausprobieren oder sogar darauf umsteigen, fehlt es an der richtigen Icon-Unterstützung für diese Netzwerke.

Ich habe mich mal dran gesetzt und das für das Twenty Fifteen Theme gelöst. Aber auch für das WordPress-Standart-Themes Twenty Sixteen funktioniert dieser Lösungsvorschlag.

Das ganze lässt sich schnell und einfach über ein Child Theme lösen. Da du ja eh schon alle Änderungen, die du an deinem Theme durchführst, über ein solches löst gehe ich hier nicht näher darauf ein.

Erstellen einer Schriftart für deine Icons

Bevor wir zur Umsetzung der Icons kommen, müssen wir uns darum kümmern das wir die Icons überhaupt irgendwie ansprechen können. Das lösen wir über eine eigene Icon-Schriftart. Bevor wir dazu kommen, musst du dir klar werden welche Icons du überhaupt haben möchtest.

Denn es ist nicht nur möglich neue hinzufügen, sondern auch gleichzeitig die alten durch moderner, oder besser zum eigene Stile passende zu ersetzen.

Ich zeige dir hier jetzt am Beispiel von Mastodon und Pixelfed wie du die Icons in das Social Media Menü bekommst.

Suche die Icons im SVG-Format

Das SVG-Format ist vektorbasierend und kennt somit kein zu klein oder zu groß.

Die Darstellung wird immer optimal berechnet und ist somit egal auf welchem Display knackig scharf. An sich wären diese kleinen Dateien schon optimal um die Icons anzuzeigen. Aber da die Themes auf die Schriftarten-Umsetzung setzen möchte ich das hier so beibehalten.

Ich habe das Mastodon-Icon hier in Wikipedia gefunden und das Pixelfed-Icon direkt auf pixelfed.social gefunden.

Icon-Schriftart erstellen

Wenn du jetzt alle Icons zusammengesucht hast kannst du eine eigene Schriftart, zum Beispiel über fontello.com, erstellen. Hier gibt es auch gleich noch viele andere Icons die du nutzen könntest, wenn du vielleicht die vorhandenen Icons ersetzen möchtest.

Fontello erlaubt dir eigene Icon-Schriftarten zu bauen.
Fontello erlaubt dir eigene Icon-Schriftarten zu bauen.

Bedenke aber umso mehr Icons du auswählst, um so größer wird die Schriftart die geladen werden muss. Also füge wirklich nur die Icons ein die du auch wirklich nutzen willst.

Im oberen Bereich befindet sich die Möglichkeit, die vorhin heruntergeladen, SVG-Dateien hochzuladen. Dadurch kannst du die Icons, die es nicht auf der Seite gibt, ganz einfach ergänzen.

Bei Fontello kannst du eigene Icons, z.B. im SVG-Format, hochladen und mit in die Schriftart integrieren.
Bei Fontello kannst du eigene Icons, z.B. im SVG-Format, hochladen und mit in die Schriftart integrieren.

Wenn du jetzt alles ausgewählt hast was in deiner neuen Icon-Schriftart sein soll geht es zum nächsten Punkt. Hier kannst du den Icons benutzerdefinierte Namen vergeben.

Angabe von Benutzerdefinierten Namen für die einzelnen Icons
Angabe von Benutzerdefinierten Namen für die einzelnen Icons

Ich finde aber das nächste Tab interessanter. Hier kannst du den Icons jetzt z.B. Buchstaben hinterlegen. So hab ich das ganze dann auch innerhalb der style.css gelöst. Ich spreche die Icons über ihren eigenen Buchstaben in der Schriftart an.

Hier kannst du für die Icons z.B. verschiedene Buchstaben hinterlegen.
Hier kannst du für die Icons z.B. verschiedene Buchstaben hinterlegen.

Wenn du dann alles so hinterlegt und eingestellt hast, dass du damit arbeiten kannst musst du nur noch der Schriftart einen Namen geben und herunterladen.

Hier kannst du den Namen deiner Schriftart eingeben und diese dann direkt herunterladen.
Hier kannst du den Namen deiner Schriftart eingeben und diese dann direkt herunterladen.

Schriftart ins Theme-Verzeichnis legen

Jetzt brauchst du dein FTP-Program. Hier musst du in den Webspace deiner WordPress Website unter /wp-content/themes/ das Child-Theme heraussuchen.

Innerhalb deines Child-Themes legst du am besten einen neuen Ordner namens font an. Hier kannst du dann die erzeugten, und vorher natürlich entpackten, .woff und .woff2 Dateien ablegen.

Anpassungen an deiner CSS-Datei im Child-Theme

Da wir jetzt die Vorbereitungen abgeschlossen haben können wir endlich dazu kommen das auch wirklich die Icons angezeigt werden.

Icon-Schriftart über CSS einbinden

Irgendwie muss ja jetzt noch die Schriftart im Child Theme Ordner geladen werden. Erst dann kannst du die Icons auch wirklich innerhalb deines Themes verwenden.

@font-face { font-family: 'tfse-icons';
  src: url('https://www.example.com/wp-content/themes/twentyfifteense/font/tfse-icon.woff')  format('woff'),
  url('https://www.example.com/wp-content/themes/twentyfifteense/font/tfse-icon.woff2')  format('woff2'); 
}

In diesem Beispiel musst du für dich die Domain (https://www.example.com), deinen Child-Theme-Namen (twentyfifteense) und den Schriftart-Namen (tfse-icon.*) anpassen.

Icon über CSS hinzufügen

Der Standard-Code sieht so aus.

.social-navigation a[href*="github.com"]:before {
  content: "\f200";
}

Dabei nutzt .social-navigation Standardmäßig die font-family: "Genericons" zur Auflösung der Icons.

Die Auflösung der Icons funktioniert dabei über die Verlinkung welche du im Social Media Menü angibst, hier als Beispiel github.com. Über content: "\f200"wird dann das GitHub Icon angesprochen und im Frontend ausgegeben.

Damit sollte die eigentlich Funktion geklärt sein.

Ich nutze hier jetzt das Mastodon-Icon als Beispiel um ein neues Icon zum Theme hinzuzufügen.

.social-navigation a[href*="dewp.space"]:before {
  font-family: tfse-icons;
  content: "m";
}

Dazu musst du die font-family auf deine Icon-Schriftart anpassen und den content mit dem Buchstaben deines gewünschten Icons hinterlegen. Das war es auch schon.

Eigentlich hast du viel mehr mit der Vorbereitung der Schriftart zu tun als dann wirklich mit der Anpassung in der style.css. Den Rest erledigt jetzt das Theme für dich.

Auf was du, gerade bei dezentralen Netzwerken, achten musst sind die Domains die du hier angibst. Denn nur genau die angegebene Domain löst dann auch das Icon auf!

Mastodon hat z.B. sogenannte Instanz die unter unterschiedlichen Domains laufen. Ich bin unter der Instanz dewp.space zu finden. Bei dir könnte oder wird es bestimmt etwas anders sein, deswegen musst du hier dann deinen Domain einfügen.

Im nächsten Beitrag erkläre ich dir dann das ganze für das Twenty Seventeen Theme. Hier wird auf eine SVG-Lösung gesetzt die ein wenig anders funktioniert. Ich konnte damit aber auch schon etwas Erfahrung sammeln bei meinem aktuellen Theme, Tabor. Denn auch hier habe ich schon die neuen Icons eingepflegt


Kommentare

Eine Antwort zu „Icons zum Social Media Menü hinzufügen, mithilfe von href styling“

  1. Avatar von Maik Söller
    Maik Söller

    Finde Deinen Ansatz mit lokale Schriften/Icons sehr lobenswert, das sollte Schule machen.

    Und kurz zu Deinem aktuellen Tweet von heute bzgl. DSGVO / Google Webfonts:

    > Ich persönlich möchte jede Verbindung zu anderen Servern gern vermeiden 😉

    Falls Interesse, schau Dir mal an, welchen Webfont der neue Editor Gutenberg bei jedem Aufruf des Editors einbindet… ohne Information, ohne Zustimmung :-/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert