WordPress Divi: Xing Icon

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 (gratis Set) ü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";}

   

Mit dem CSS-Code wird die Schrift, die man auf den Webserver gespeichert hat, zunächst aufgerufen und bekommt den Namen „xing“. Anschließend wird dem Twitter Icon die entsprechende Font-Family dafür zugewiesen und die Symbolnummer zugewiesen (erhält man aus der Icon Moon App).

Et voilá, schon hat man auch das Xing-Icon auf der Webseite.

P.S: Eine Leserin hat mich darauf hingewiesen, dass nicht alle Icon Sets der Moon App gratis sind und mir noch folgende Quelle genannt: https://www.websiteplanet.com/blog/free-icons-for-commercial-use/ Einige der Quellen sind zwar Bilder, aber dennoch vielen Dank dafür!