kurzem musste ich bei einem Kunden in der oberen Leiste (Sekundärmenü) ein Xing-Icon zur Verfügung stellen. Leider wird das Xing-Icon von der Schrift, die Elegant Themes für die Icons verwendet, nicht zur Verfügung gestellt.
Eine Möglichkeit das zu lösen ist, sich einen anderen Webfont zu suchen der das Icon hat, und diesen Font für die Darstellung des Xing-Icons zu verwenden.
Das wird auch hier so beschrieben: https://webdevtrust.com/xing-social-icon-font-divi/
Folgende Vorgehensweise habe ich dann anhand dieses Beitrags gewählt:
- Download des gewünschten Icons über die Icon Moon App.
- Entpacken der downgeloadeten Daten in einen eigenen Ordner „fonts“ auf dem Webserver (oberste Ebene).
- Aktivieren der Social Media Icons im sekundären Menü über den Theme Customizer.
- Ergänzen der Icons (in meinem Fall Facebook und Twitter) und Angabe der entsprechenden Links in den Divi Theme Options.
- Ebenda ergänzen des folgenden CSS-Codes:
/*Xing statt Twitter*/ @font-face { font-family: 'xing'; font-style: normal; font-weight: 400; src: url('../fonts/icomoon.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/icomoon?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/icomoon.woff') format('woff'), /* Modern Browsers */ url('../fonts/icomoon.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/icomoon.svg#xing') format('svg'); /* Legacy iOS */ } .et-social-twitter a:before {font-family:xing!important;} .et-social-twitter a.icon:before {content: "\ead4";}