Vogel-Liebhaber aufgepasst: So bekommt Ihr das alte Twitter Icon mit dem Vogel zurück auf Eure Divi Website

Alles begann auf meinem Smartphone: Was ist da für ein gruseliges X in der Notification Bar? Ich habe diese App nicht installiert! Bin ich gehackt worden? Nein, Elon Musk hatte wohl geglaubt mit so einem radikalen  Re-Branding den Umsatz von Twitter wieder in die schwarzen Zahlen zu bekommen. Meiner Meinung als Designer nach: Absoluter Fail!

Am 21. März 2006 wurde Twitter Inc. in San Francisco, United States of America, gegründet. Seit dem begleitet uns dieses ikonische Vögelchen auf all unseren Geräten. Auf jeder Website war es zu sehen. Das App Icon sprang einem immer direkt ins Auge und überhaupt hatte dieser „sweetie Tweetie“ eine magische und sympathische Aura, von der man sich einfach angezogen fühlen musste. Der Name Twitter war Programm. Jeder Liebhaber von Kurznachrichten zwitscherte täglich interessante Kurznachrichten, persönliche Meinungen und interessante Links in dem sozialen Netzwerk (Social Network) Twitter. Sollen wir jetzt etwa alle iksen?
Ich war so sauer über dieses radikale Re-Branding von Twitter, dass ich die App umgehend von meinem Smartphone deinstalliert habe.

Divi Update 4.22.1 mit aktualisiertem Icon Font „ET Modules“

Mit dem Divi Update auf Version 4.22.1 hat Elegant Themes* auch den Divi Icon Font mit dem neuen Twitter Logo aktualisiert. Sweetie Tweetie wurde daraus komplett verbannt. Das neue X Logo wurde an die Stellen der Unicode Tabelle kopiert, wo vorher das Twitter Logo in 3 Varianten zu finden war.

• Nur der Vogel ohne Hintergrund
• Ein Kreis mit dem ausgestanzten Twitter Vogel
• Ein Quadrat mit runden Ecken und dem ausgestanzten Vogel von Twitter

Ich habe mich an den Support von Divi gewendet und darum gebeten, den alten Twitter Vogel nicht komplett zu eliminieren, sondern für Liebhaber der Nostalgie immer noch zur Auswahl in dem Icon Font zu belassen. Das wird aber mit Sicherheit keine hohe Priorität bei der Entwicklung genießen und von daher musste ich mir selbst etwas einfallen lassen, um das Twitter Logo weiterhin auf meiner Website haben zu können. Natürlich war es mir sehr wichtig das alte Twitter Logo ebenfalls als frei skalierbare und einfärbbare Vektorgrafik in Form eines Icon Fonts verwenden zu können. Auch die Position und der zu verwendende Code in der Unicode Tabelle sollte identisch sein zu dem letzten Divi Icon Font mit dem Vogel von Twitter in Divi Version 4.22.0.

Divi Nutzer: 3 Möglichkeiten, um wieder den Twitter Vogel in den Social Media Icons auf Eurer Website zu haben

Möglichkeit 1

Der Divi Support* hat mir innerhalb einer Stunde bereits mit einer Lösung geantwortet und sogar den CSS-Code mitgeschickt. Respekt! Ziemlich starke Leistung von dem Support für Millionen von Kunden aus aller Welt. Da ich mich mit CSS sehr gut auskenne, wäre das nicht nötig gewesen. Man riet mir ein PNG mit dem alten Twitter Logo hochzuladen und das Icon dann mit CSS Code in meinem Child Theme mit !important zu überschreiben. Diese Idee war mir aber nicht flexibel genug. Das Icon wäre dann ein statisches Bitmap gewesen. Das Umfärben per CSS und eine stufenlose Vergrößerung in bester Qualität wäre damit nicht möglich gewesen.

Möglichkeit 2

Ein „Quick-Fix“ war für mich, den Elegant Themes Icon Font in allen 4 Webfont Formaten (eot, svg, ttf, woff) aus der Divi Version 4.22.0 an die Stelle im Divi Theme der aktuellen Version* zu kopieren. Das hat natürlich sehr schnell und einfach funktioniert, nur würde diese Änderung mit jedem Divi Update in Eurem Parent Theme wieder überschrieben, so dass Ihr nach jedem Update von Divi den alten Icon Font wieder in den Divi Ordner \core\admin\fonts\modules\all\ kopieren müsstet. Ein weiterer Nachteil dieses Quick-Fix ist, dass über die Zeit mit Sicherheit neue Icons hinzukommen werden, die Ihr dann nicht verwenden könnt, wenn Ihr den alten Icon Font mit dem Vogel im Twitter Logo verwenden wollt.

Möglichkeit 3

Da es absolut zwingend erforderlich ist, ein Child Theme zu verwenden, halte ich dies auf Dauer für die beste Lösung. In der Icomoon App könnt Ihr einen Icon Font als SVG hochladen. Auch dort seht Ihr dann alle darin enthaltenen Icons in einer großen Tablle mit dem entsprechenden Unicode. Ich habe darin nur die 3 Twitter Icons ausgewählt und daraus einen neuen Icon Font mit einem neuen Namen in allen gängigen Webfont Formaten generiert und diese Dateien dann in einem Unterordner meines Child Themes (/fonts/) abgelegt. Wenn Ihr dann den folgenden CSS-Code in die style.css Eures Child Themes kopiert bekommt das Soziale Netzwerk X wieder einen Vogel… auf Eurer Website.

CSS Code für den Icon Font von Elegant Themes nur mit 3 Versionen des alten Twitter Logos

/* Divi Twitter Icons Font: drei kubik saves the birdie! */

@font-face {
     font-family: "modules_twitter";
     font-display: block;
     src: url("fonts/modules_twitter.eot");
     src: url("fonts/modules_twitter.eot?#iefix") format("embedded-opentype"),
            url("fonts/modules_twitter.ttf") format("truetype"),
            url("fonts/modules_twitter.woff") format("woff"),
            url("fonts/modules_twitter.svg?#modules_twitter") format("svg");
     font-weight: 400;
     font-style: normal;
}

.et-social-twitter a.icon::before {
    font-family: "modules_twitter" !important;
    text-transform: none;
    content: "\e094"; /* Set "\e0ab" for the circle icon and "\e0c2" for the rounded square icon */
}

ET Modules Icon Font mit alten Twitter Icons als Webfont herunterladen

Wer den alten Twitter Vogel auch so gerne hatte, kann hier einen Icon Font für das Divi Theme herunterladen, in dem nur die 3 originalen Twitter Icons designed by Elegant Themes* integriert sind. Den CSS Code findet Ihr auch in einer Readme Datei in diesem fast 7kb großen Download. Ich hätte nie gedacht, dass 7kb einem so viel Freude bereiten können 😉

Icon Font mit Twitter Birdie herunterladen

Nachtrag: Das alte Twitter Logo auch in Shariff zum Teilen von Beiträgen wieder haben

Die meisten von Euch kennen das DSGVO-konforme Social Sharing PlugIn Shariff, mit dem Ihr auf Eurer WordPress Website an allen gewünschten Positionen Links mit Logo zum Teilen in allen gewünschten Social Media Plattformen hinzufügen könnt. Hier wurde seitens der Entwickler selbstverständlich auch das neue Twitter Logo X eingebaut. Wenn Ihr auch dort (wie unter diesem Beitrag zu sehen) wieder das Twitter Vögelchen in den alten Brand Colors sehen wollt, dann editiert die Datei aus dem PlugIn Verzeichnis /wp-content/plugins/shariff/services/shariff-twitter.php

Ab dem Kommentar „// Colors.“ könnt Ihr den folgenden Code hinzufügen und den vorhandenen Code bis zum letzten Zeichen in der Datei ersetzen.

	// Colors.
	$main_color      = '#1d9bf0';
	$secondary_color = '#177cc0';
	$wcag_color      = '#177cc0';

	// SVG icon.
	$svg_icon = '';

	// Backend available?
	$backend_available = 0;

	// Button alt label.
	$button_title_array = array(
		'bg' => 'Сподели във Twitter (X)',
		'cs' => 'Sdílet na Twitter (X)',
		'da' => 'Del på Twitter (X)',
		'de' => 'Bei Twitter (X) teilen',
		'en' => 'Share on Twitter (X)',
		'es' => 'Compartir en Twitter (X)',
		'fi' => 'Jaa Twitter (X)',
		'fr' => 'Envoyer par Twitter (X)',
		'hr' => 'Podijelite na Twitter (X)',
		'hu' => 'Megosztás Twitter (X)',
		'it' => 'Condividi su Twitter (X)',
		'nl' => 'Delen op Twitter (X)',
		'no' => 'Del på Twitter (X)',
		'pl' => 'Udostępnij na Twitter (X)',
		'pt' => 'Compartilhar no Twitter (X)',
		'ro' => 'Partajează pe Twitter (X)',
		'ru' => 'Поделиться на Twitter (X)',
		'sk' => 'Zdieľať na Twitter (X)',
		'sl' => 'Deli na Twitter (X)',
		'sr' => 'Podeli na Twitter (X)',
		'sv' => 'Dela på Twitter (X)',
		'tr' => 'Twitter (X)\'ta paylaş',
	);
}

Schluss

Wenn Ihr Fragen habt, nutzt gerne die Kommentarfunktion unter diesem Beitrag, oder schreibt mir eine direkte Nachricht über das Medium Eurer Wahl. Ich hoffe Ihr werdet eben so viel Freude über das Twitter Vögelchen in Euren Social Media Links auf Eurer Website haben. Falls Ihr Freunde habt, die sich ebenso über das Re-Branding von Twitter ärgern und sich den Twitter Vogel auf Ihrer Website zurückwünschen, dann teilt diesen Beitrag mit ihnen und das sympathische Vögelchen kommt wieder auf Eurer Divi Website* vorbeigeflattert.

Elegant Themes Divi Icon Font ETModules – 406 Icons, CSS Classes & Unicode (November 2023)

Die Tabelle mit allen Icons des Elegant Themes Divi* Icon Font ETModules findet Ihr nun in einem separaten Beitrag. Hier klicken, um zu diesem Beitrag zu gelangen.