Mastodon-Icon in Social Media Menüs in Wordpress

Problem

Viele Themes in Wordpress (und wahrscheinlich auch in anderen CMS) ermöglichen es, Social Media Icons auf der Website zu platzieren. Die Links zu den proprietären Plattformen wie Facebook, Twitter, Instagram ... werden dabei automatisch erkannt und mit dem passenden Icons angezeigt. Ein Link zu einer Mastodon-Instanz dagegen in der Regel nicht. Bei mir wurde dieser Link dann einfach nur mit einem 'Büroklammer'-Symbol angezeigt. Das ist blöd, weil dann das Fediverse und speziell Mastodon nicht wirklich sichtbar ist.

Mein Vorgehen:

1. Über den Web-Inspektor nachschauen, welche CSS-ID ein Icon-Menü-Eintrag hat.
2. Aus diesen Mastodon-Icons das gewünschte auswählen.
3. Das Icon farblich und von der Größe her so anpassen, dass es zu den übrigen Icons in der Leiste passt.
4. Unten bei 'for developers' CSS auswählen und den zweiten Code kopieren, d.h. den, der mit 'content:' beginnt
5. Daraus einen CSS-Befehl zusammenbasteln, in dem auch ein Teil der URL der eigenen Mastodon-Instant drinsteht.
6. Diesen Befehl im Customizer des Themes unter 'Custom CSS' eintragen.

Beispiel:

• Bei mir ist die Icon-Liste über ".s-icons" zu finden.
• Über die Farbpipette im Firefox-Browser konnte ich herausfinden, dass die Farbe der anderen Icons den Wert #5f6973 (= ein dunkles Grau hat) und dass die Icons etwas größer sind, als das hier angebotene Mastodon-Icon.
• Ich bin auf der Instanz digitalcourage.social.

Ergebnis

Als zusätzlicher Code, den ich als Custom-CSS im Customizer eintrage ergibt sich:

.s-icons a[href*="digitalcourage.social"]::before {content: url('https://api.iconify.design/bi/mastodon.svg?color=%235f6973&width=18&height=18');}