Jeder Webseiten Betreiber ist heute nicht nur auf seinem Blog aktiv, sondern nutzt einen der zahlreichen Social Media Kanäle. Schön sieht es dann aus, wenn für die Verlinkungen das entsprechende Icon für den Kanal verwendet wird. Damit man nicht selber nach den passenden Icons für die Verlinkung auf der Webseite suchen muss oder anfängt sie selber zu zeichnen, gibt es Font Awesome.
Font Awesome stellt einen Font mit sehr vielen Icons bereit. Die Icons können damit ganz einfach auf der Webseite eingebunden werden. Sobald ein Link an der vorgesehen Stelle erstellt wird, werden die Social Media Kanäle mit den richtigen Icons angezeigt.
Wie bekomme ich Font Awesome
Entweder installiert man sich ein Plugin – einfach nach „Font Awesome“ in der Plugins Liste (Plugins > Plugin installieren) suchen oder das WordPress Theme liefert diesen Font gleich mit.
Wann ich selber ein bischen nacharbeiten muss
Das Theme, welches ich in WordPress verwende, hat Font Awesome eingebunden. Aufgrund der Implementierung meines Themes werden manche Icons verschiedener Kanäle aber nicht automatisch angezeigt.
Für mich fehlt im verwendeten Theme beispielsweise die Implementierung für das Icon von 500px. Dadurch wurde einfach ein allgemeines Icon verwendet (ein Zahnrad).
Um das zu beheben, sind nur ein paar Schritte notwendig.
Eine Schritt-für-Schritt-Anleitung
- Vorbereitend auf der Webseite von Font Awesome den Unicode des gewünschten Icons raussuchen: http://fontawesome.io/icons/
- In den Customizer von WordPress wechseln.
- Den Bereich „Zusätzliches CSS“ aufrufen.
- In das Textfeld den folgenden Codeschnippsel einfügen und entsprechend CSS Selektoren, die URL im Attribut href und den Wert von „content“ für die eigenen Bedürfnisse anpassen.
Unbedingt darauf achten, dass der vorgestellte Backslash am Unicode nicht gelöscht wird. - Zum Abschließen auf „Veröffentlichen“ klicken und schon wird das Icon angezeigt.
Das Ergebnis für mein Theme sieht dann am Beispiel von 500px folgendermaßen aus:
/* 500px icon */
.top-social-icons a[href*="500px.com"]:before,
.social-icons a[href*="500px.com"]:before {
content: "\f26e";
}
