Schritt 1: Laden der Xing Icon Font

Die Xing Icon Font können Sie direkt bei Github herunterladen: https://github.com/cubehrends/xing-for-divi/tree/master/fonts

Speichern Sie diese Schriften jetzt in einem Unterordner in Ihrem Child-Theme, z. B. “fonts”:

Der unkenntlich gemachte Ordnername ist Ihr Child-Theme-Ordner.

Schritt 2: Einbinden der Xing Icon Font

Als nächste müssen Sie die Xing Icon Font in der style.css Ihres Child-Themes einbinden.

/* XING Social Icon Font einbinden */

@font-face {
 font-family: 'xing';
 src: url('/wp-content/themes/child-theme/fonts/xing.eot?2a5kpv');
 src: url('/wp-content/themes/child-theme/fonts/xing.eot?2a5kpv#iefix') format('embedded-opentype'),
 url('/wp-content/themes/child-theme/fonts/xing.ttf?2a5kpv') format('truetype'),
 url('/wp-content/themes/child-theme/fonts/xing.woff?2a5kpv') format('woff'),
 url('/wp-content/themes/child-theme/fonts/xing.svg?2a5kpv#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 }

Schritt 3: Anpassen der social-icons.php

Damit das Social Media Icon für Xing auch im Footer angezeigt wird, müssen Sie nun noch die Datei social-icons.php anpassen.

Diese Daten finden Sie standardmäßig im Divi Theme unter /includes/social_icons.php.

Speichern Sie sich diese Datei zunächst lokal. Legen Sie als nächstes einen Unterordner “includes” in Ihrem Child-Theme an und fügen Sie die Datei hinzu:

Öffnen Sie die Datei und fügen Sie den folgenden Code ein:

<li class="custom-social-icon icon-xing2">
 <a href="https://www.xing.com/profile/ihr-profil-name" class="icon" target="_blank">
 <span><?php esc_html_e( ' ', 'Divi' ); ?></span>
 </a>
 </li>

Ersetzen Sie “https://www.xing.com/profile/ihr-profil-name” mit dem Link zu Ihrem Account.

Ich selbst habe diesen zwischen dem  und RSS-Icon eingebaut:

<?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
 <li class="et-social-icon et-social-google-plus">
 <a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
 <span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
 </a>
 </li>
 <?php endif; ?>

<li class="custom-social-icon icon-xing2">
  <a href="https://www.xing.com/profile/ihr-profil-name" class="icon" target="_blank">
  <span><?php esc_html_e( ' ', 'Divi' ); ?></span>
  </a>
  </li>

<?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
 <?php
 $et_rss_url = '' !== et_get_option( 'divi_rss_url' )
 ? et_get_option( 'divi_rss_url' )
 : get_bloginfo( 'rss2_url' );
 ?>
 <li class="et-social-icon et-social-rss">
 <a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
 <span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
 </a>
 </li>
 <?php endif; ?>
 </ul>

Schritt 4: Designen Sie Ihr Social Media Icon

Zum Schluss können Sie das Social Media Icon noch etwas anpassen, damit es dem Divi-Design entspricht:

/* Xing-Icon designen */

#top-header .custom-social-icon a {
 font-size: 14px;
 line-height: 1em;
 }
 .custom-social-icon a {
 display: inline-block;
 position: relative;
 color: #fff;
 font-size: 24px;
 text-align: center;
 text-decoration: none;
 transition: color 300ms ease 0s;
 }
 .custom-social-icon a:hover {
 color: #0274be;
 opacity: 0.7;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 }
 .icon-xing, .icon-xing2 {
 font-family: 'xing';
 }
 .icon-xing2 a.icon:before {
 content: "\ead4";
 }

Das Ergebnis

(hier noch zusätzlich mit LinkedIn)

Beitragsbild Header: @Pure Solutions Adobe Stock 77868987