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.
Inhalt
- Divi Update 4.22.1 mit aktualisiertem Icon Font „ET Modules“
- Divi Nutzer: 3 Möglichkeiten, um wieder den Twitter Vogel in den Social Media Icons auf Eurer Website zu haben
- CSS Code für den Icon Font von Elegant Themes nur mit 3 Versionen des alten Twitter Logos
- ET Modules Icon Font mit alten Twitter Icons als Webfont herunterladen
- Schluss
- Elegant Themes Divi Icon Font ETModules – 406 Icons, CSS Classes & Unicode (November 2023)
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. Auf dieser Website seht Ihr eine ältere Version des Divi Icon Fonts mit allen Icon Codes, die Ihr in Eurer CSS Datei verwenden könnt.
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
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)
css class name: icon-arrow_up
css class name: icon-arrow_down
css class name: icon-arrow_left
css class name: icon-arrow_right
css class name: icon-arrow_left-up
css class name: icon-arrow_right-up
css class name: icon-arrow_right-down
css class name: icon-arrow_left-down
css class name: icon-arrow-up-down
css class name: icon-arrow_up-down_alt
css class name: icon-arrow_left-right_alt
css class name: icon-arrow_left-right
css class name: icon-arrow_expand_alt2
css class name: icon-arrow_expand_alt
css class name: icon-arrow_condense
css class name: icon-arrow_expand
css class name: icon-arrow_move
css class name: icon-arrow_carrot-up
css class name: icon-arrow_carrot-down
css class name: icon-arrow_carrot-left
css class name: icon-arrow_carrot-right
css class name: icon-arrow_carrot-2up
css class name: icon-arrow_carrot-2down
css class name: icon-arrow_carrot-2left
css class name: icon-arrow_carrot-2right
css class name: icon-arrow_carrot-up_alt2
css class name: icon-arrow_carrot-down_alt2
css class name: icon-arrow_carrot-left_alt2
css class name: icon-arrow_carrot-right_alt2
css class name: icon-arrow_carrot-2up_alt2
css class name: icon-arrow_carrot-2down_alt2
css class name: icon-arrow_carrot-2left_alt2
css class name: icon-arrow_carrot-2right_alt2
css class name: icon-arrow_triangle-up
css class name: icon-arrow_triangle-down
css class name: icon-arrow_triangle-left
css class name: icon-arrow_triangle-right
css class name: icon-arrow_triangle-up_alt2
css class name: icon-arrow_triangle-down_alt2
css class name: icon-arrow_triangle-left_alt2
css class name: icon-arrow_triangle-right_alt2
css class name: icon-arrow_back
css class name: icon-icon_minus-06
css class name: icon-icon_plus
css class name: icon-icon_close
css class name: icon-icon_check
css class name: icon-icon_minus_alt2
css class name: icon-icon_plus_alt2
css class name: icon-icon_close_alt2
css class name: icon-icon_check_alt2
css class name: icon-icon_zoom-out_alt
css class name: icon-icon_zoom-in_alt
css class name: icon-icon_search
css class name: icon-icon_box-empty
css class name: icon-icon_box-selected
css class name: icon-icon_minus-box
css class name: icon-icon_plus-box
css class name: icon-icon_box-checked
css class name: icon-icon_circle-empty
css class name: icon-icon_circle-slelected
css class name: icon-icon_stop_alt2
css class name: icon-icon_stop
css class name: icon-icon_pause_alt2
css class name: icon-icon_pause
css class name: icon-icon_menu
css class name: icon-icon_menu-square_alt2
css class name: icon-icon_menu-circle_alt2
css class name: icon-icon_ul
css class name: icon-icon_ol
css class name: icon-icon_adjust-horiz
css class name: icon-icon_adjust-vert
css class name: icon-icon_document_alt
css class name: icon-icon_documents_alt
css class name: icon-icon_pencil
css class name: icon-icon_pencil-edit_alt
css class name: icon-icon_pencil-edit
css class name: icon-icon_folder-alt
css class name: icon-icon_folder-open_alt
css class name: icon-icon_folder-add_alt
css class name: icon-icon_info_alt
css class name: icon-icon_error-oct_alt
css class name: icon-icon_error-circle_alt
css class name: icon-icon_error-triangle_alt
css class name: icon-icon_question_alt2
css class name: icon-icon_question
css class name: icon-icon_comment_alt
css class name: icon-icon_chat_alt
css class name: icon-icon_vol-mute_alt
css class name: icon-icon_volume-low_alt
css class name: icon-icon_volume-high_alt
css class name: icon-icon_quotations
css class name: icon-icon_quotations_alt2
css class name: icon-icon_clock_alt
css class name: icon-icon_lock_alt
css class name: icon-icon_lock-open_alt
css class name: icon-icon_key_alt
css class name: icon-icon_cloud_alt
css class name: icon-icon_cloud-upload_alt
css class name: icon-icon_cloud-download_alt
css class name: icon-icon_image
css class name: icon-icon_images
css class name: icon-icon_lightbulb_alt
css class name: icon-icon_gift_alt
css class name: icon-icon_house_alt
css class name: icon-icon_genius
css class name: icon-icon_mobile
css class name: icon-icon_tablet
css class name: icon-icon_laptop
css class name: icon-icon_desktop
css class name: icon-icon_camera_alt
css class name: icon-icon_mail_alt
css class name: icon-icon_cone_alt
css class name: icon-icon_ribbon_alt
css class name: icon-icon_bag_alt
css class name: icon-icon_creditcard
css class name: icon-icon_cart_alt
css class name: icon-icon_paperclip
css class name: icon-icon_tag_alt
css class name: icon-icon_tags_alt
css class name: icon-icon_trash_alt
css class name: icon-icon_cursor_alt
css class name: icon-icon_mic_alt
css class name: icon-icon_compass_alt
css class name: icon-icon_pin_alt
css class name: icon-icon_pushpin_alt
css class name: icon-icon_map_alt
css class name: icon-icon_drawer_alt
css class name: icon-icon_toolbox_alt
css class name: icon-icon_book_alt
css class name: icon-icon_calendar
css class name: icon-icon_film
css class name: icon-icon_table
css class name: icon-icon_contacts_alt
css class name: icon-icon_headphones
css class name: icon-icon_lifesaver
css class name: icon-icon_piechart
css class name: icon-icon_refresh
css class name: icon-icon_link_alt
css class name: icon-icon_link
css class name: icon-icon_loading
css class name: icon-icon_blocked
css class name: icon-icon_archive_alt
css class name: icon-icon_heart_alt
css class name: icon-icon_star_alt
css class name: icon-icon_star-half_alt
css class name: icon-icon_star
css class name: icon-icon_star-half
css class name: icon-icon_tools
css class name: icon-icon_tool
css class name: icon-icon_cog
css class name: icon-icon_cogs
css class name: icon-arrow_up_alt
css class name: icon-arrow_down_alt
css class name: icon-arrow_left_alt
css class name: icon-arrow_right_alt
css class name: icon-arrow_left-up_alt
css class name: icon-arrow_right-up_alt
css class name: icon-arrow_right-down_alt
css class name: icon-arrow_left-down_alt
css class name: icon-arrow_condense_alt
css class name: icon-arrow_expand_alt3
css class name: icon-arrow_carrot_up_alt
css class name: icon-arrow_carrot-down_alt
css class name: icon-arrow_carrot-left_alt
css class name: icon-arrow_carrot-right_alt
css class name: icon-arrow_carrot-2up_alt
css class name: icon-arrow_carrot-2dwnn_alt
css class name: icon-arrow_carrot-2left_alt
css class name: icon-arrow_carrot-2right_alt
css class name: icon-arrow_triangle-up_alt
css class name: icon-arrow_triangle-down_alt
css class name: icon-arrow_triangle-left_alt
css class name: icon-arrow_triangle-right_alt
css class name: icon-icon_minus_alt
css class name: icon-icon_plus_alt
css class name: icon-icon_close_alt
css class name: icon-icon_check_alt
css class name: icon-icon_zoom-out
css class name: icon-icon_zoom-in
css class name: icon-icon_stop_alt
css class name: icon-icon_menu-square_alt
css class name: icon-icon_menu-circle_alt
css class name: icon-icon_document
css class name: icon-icon_documents
css class name: icon-icon_pencil_alt
css class name: icon-icon_folder
css class name: icon-icon_folder-open
css class name: icon-icon_folder-add
css class name: icon-icon_folder_upload
css class name: icon-icon_folder_download
css class name: icon-icon_info
css class name: icon-icon_error-circle
css class name: icon-icon_error-oct
css class name: icon-icon_error-triangle
css class name: icon-icon_question_alt
css class name: icon-icon_comment
css class name: icon-icon_chat
css class name: icon-icon_vol-mute
css class name: icon-icon_volume-low
css class name: icon-icon_volume-high
css class name: icon-icon_quotations_alt
css class name: icon-icon_clock
css class name: icon-icon_lock
css class name: icon-icon_lock-open
css class name: icon-icon_key
css class name: icon-icon_cloud
css class name: icon-icon_cloud-upload
css class name: icon-icon_cloud-download
css class name: icon-icon_lightbulb
css class name: icon-icon_gift
css class name: icon-icon_house
css class name: icon-icon_camera
css class name: icon-icon_mail
css class name: icon-icon_cone
css class name: icon-icon_ribbon
css class name: icon-icon_bag
css class name: icon-icon_cart
css class name: icon-icon_tag
css class name: icon-icon_tags
css class name: icon-icon_trash
css class name: icon-icon_cursor
css class name: icon-icon_mic
css class name: icon-icon_compass
css class name: icon-icon_pin
css class name: icon-icon_pushpin
css class name: icon-icon_map
css class name: icon-icon_drawer
css class name: icon-icon_toolbox
css class name: icon-icon_book
css class name: icon-icon_contacts
css class name: icon-icon_archive
css class name: icon-icon_heart
css class name: icon-icon_profile
css class name: icon-icon_group
css class name: icon-icon_grid-2×2
css class name: icon-icon_grid-3×3
css class name: icon-icon_music
css class name: icon-icon_pause_alt
css class name: icon-icon_phone
css class name: icon-icon_upload
css class name: icon-icon_download
css class name: icon-social_facebook
css class name: icon-social_twitter
css class name: icon-social_pinterest
css class name: icon-social_googleplus
css class name: icon-social_tumblr
css class name: icon-social_tumbleupon
css class name: icon-social_wordpress
css class name: icon-social_instagram
css class name: icon-social_dribbble
css class name: icon-social_vimeo
css class name: icon-social_linkedin
css class name: icon-social_rss
css class name: icon-social_deviantart
css class name: icon-social_share
css class name: icon-social_myspace
css class name: icon-social_skype
css class name: icon-social_youtube
css class name: icon-social_picassa
css class name: icon-social_googledrive
css class name: icon-social_flickr
css class name: icon-social_blogger
css class name: icon-social_spotify
css class name: icon-social_delicious
css class name: icon-social_facebook_circle
css class name: icon-social_twitter_circle
css class name: icon-social_pinterest_circle
css class name: icon-social_googleplus_circle
css class name: icon-social_tumblr_circle
css class name: icon-social_stumbleupon_circle
css class name: icon-social_wordpress_circle
css class name: icon-social_instagram_circle
css class name: icon-social_dribbble_circle
css class name: icon-social_vimeo_circle
css class name: icon-social_linkedin_circle
css class name: icon-social_rss_circle
css class name: icon-social_deviantart_circle
css class name: icon-social_share_circle
css class name: icon-social_myspace_circle
css class name: icon-social_skype_circle
css class name: icon-social_youtube_circle
css class name: icon-social_picassa_circle
css class name: icon-social_googledrive_alt2
css class name: icon-social_flickr_circle
css class name: icon-social_blogger_circle
css class name: icon-social_spotify_circle
css class name: icon-social_delicious_circle
css class name: icon-social_facebook_square
css class name: icon-social_twitter_square
css class name: icon-social_pinterest_square
css class name: icon-social_googleplus_square
css class name: icon-social_tumblr_square
css class name: icon-social_stumbleupon_square
css class name: icon-social_wordpress_square
css class name: icon-social_instagram_square
css class name: icon-social_dribbble_square
css class name: icon-social_vimeo_square
css class name: icon-social_linkedin_square
css class name: icon-social_rss_square
css class name: icon-social_deviantart_square
css class name: icon-social_share_square
css class name: icon-social_myspace_square
css class name: icon-social_skype_square
css class name: icon-social_youtube_square
css class name: icon-social_picassa_square
css class name: icon-social_googledrive_square
css class name: icon-social_flickr_square
css class name: icon-social_blogger_square
css class name: icon-social_spotify_square
css class name: icon-social_delicious_square
css class name: icon-icon_wallet_alt
css class name: icon-icon_shield_alt
css class name: icon-icon_percent_alt
css class name: icon-icon_pens_alt
css class name: icon-icon_mug_alt
css class name: icon-icon_like_alt
css class name: icon-icon_globe_alt
css class name: icon-icon_flowchart_alt
css class name: icon-icon_id_alt
css class name: icon-icon_hourglass
css class name: icon-icon_globe
css class name: icon-icon_globe-2
css class name: icon-icon_floppy_alt
css class name: icon-icon_drive_alt
css class name: icon-icon_clipboard
css class name: icon-icon_calculator_alt
css class name: icon-icon_floppy
css class name: icon-icon_easel
css class name: icon-icon_drive
css class name: icon-icon_dislike
css class name: icon-icon_datareport
css class name: icon-icon_currency
css class name: icon-icon_calulator
css class name: icon-icon_building
css class name: icon-icon_easel_alt
css class name: icon-icon_dislike_alt
css class name: icon-icon_datareport_alt
css class name: icon-icon_currency_alt
css class name: icon-icon_briefcase_alt
css class name: icon-icon_target
css class name: icon-icon_shield
css class name: icon-icon_search_alt
css class name: icon-icon_rook
css class name: icon-icon_puzzle_alt
css class name: icon-icon_printer-alt
css class name: icon-icon_percent
css class name: icon-icon_id-2_alt
css class name: icon-icon_building_alt
css class name: icon-icon_briefcase
css class name: icon-icon_balance
css class name: icon-icon_wallet
css class name: icon-icon_search1
css class name: icon-icon_puzzle
css class name: icon-icon_printer
css class name: icon-icon_pens
css class name: icon-icon_mug
css class name: icon-icon_like
css class name: icon-icon_id
css class name: icon-icon_id-2
css class name: icon-icon_flowchart
css class name: icon-toggle
css class name: icon-tabs
css class name: icon-subscribe
css class name: icon-slider
css class name: icon-sidebar
css class name: icon-share
css class name: icon-pricing-table
css class name: icon-portfolio
css class name: icon-number-counter
css class name: icon-header
css class name: icon-filtered-portfolio
css class name: icon-divider
css class name: icon-cta
css class name: icon-countdown
css class name: icon-circle-counter
css class name: icon-blurb
css class name: icon-bar-counters
css class name: icon-audio
css class name: icon-accordion
css class name: icon-text
css class name: icon-testimonial
css class name: icon-shop
css class name: icon-person
css class name: icon-menu
css class name: icon-map
css class name: icon-login
css class name: icon-image
css class name: icon-gallery
css class name: icon-follow
css class name: icon-contact
css class name: icon-blog
css class name: icon-reset
css class name: icon-code
css class name: icon-underline
css class name: icon-bold
css class name: icon-italic
css class name: icon-uppercase
css class name: icon-divi
css class name: icon-D
css class name: icon-import_export
css class name: icon-double-underline
css class name: icon-smallcaps
css class name: icon-strikethrough
css class name: icon-menu-expand
css class name: icon-strikethrough1
css class name: icon-icon_external_link
0 Comments