XING

Image © XING

How to add XING Social Icon Font to Divi

In the German speaking area we have a social network called XING which is quite relevant. It is like LinkedIn but located in Hamburg, Germany and quite established while it exists since 2003. Until 2006 it was named openBC or Open Business Club which pretty much tells what it is all about.

I would not recommend anything to you I’ve not been using enthusiastically myself. Bold links are affiliate links. I recommend what you’ll find there and If you make a purchase, I will get a commission without additional costs to you.

If you have anything to do with freelancing or job placement in the german-speaking area you probably want to link to your profile there. Therefore I will provide you with a XING icon font to seamlessly integrate into your Divi child theme Social Bar.

Learn

Keep reading for an explanation on how to go on about it.

Keep reading

The button will take you to a step by step guide through the process.
Continue

Watch

Take a look at what this is all about and see the feature in action.

Go there

The button will take you to a project were we implemented this feature.
helloham

Download

Get the files from GitHub immediately and for free.

From GitHub

The button will take you to GitHub were the files you need are available.
GitHub
xing
xing2

The XING icon font

The first thing we want is a XING icon font to match the Divi social icon font called ETmodules. This icon font comes with 360 awesome icons but XING isn’t among them, sadly. The XING icon can luckily be found at IcoMoon and even downloaded as a webfont in the IcoMoon-App. Awesome!

We then save the xing font files into a  subfolder of our child theme named fonts.

Loading the font

The next thing we need to do is to load the XING webfont into our theme. This is done with adding the @font-face in our child theme style.css.

We then define our custom-social-icon-classes and add classes to use in the next step: modifying the social-icon-template.

Customizing the template

Divi displays the social icons from a template located at /includes/social_icons.php. We add the same folder and file to our child theme to make WordPress use this one instead.

We now want to add another list element containing our XING icon and link to our profile at the end of that unsorted-list-element.

Styling the icons

The last thing we need to do is to style the icon according to our theme. This goes into your child themes style.css and could look like this

And there we have it: a perfectly matching XING icon with our Divi child theme. This can easily be adapted to any theme using icon fonts to display social icons. Could you get that to work? How do you like it?

If you have any trouble following the step-by-step-instructions, I recommend downloading the ZIP and adding everything in there to your child theme. Do not forget to edit Firstname-Lastname and make it point to your profile at XING in the /includes/social_icons.php file.

7 thoughts on “XING Social Icon Font for Divi”

  1. Hey, I can’t seem to get it to work. It displays a Times New Roman word “Xing” next to a not loaded icon. Any ideas? Thanx

  2. Same problem like Nicole, but cant give link cause site cannot go online till mistake fixed. Instruction definitely not working.

    1. It does work for sure but I can not tell you what’s wrong when all the info you provide is “it’s not working”. I’ve reworded some parts of the tutorial for clarity. Hope that helps.

  3. Hi, I’m getting the same problem.
    Is this code in the social_icons.php correct?

    When I use this, then it displays the text “xing2” next to the other icons.
    I also found the files You provided at github. There the code looks like this:

    But then nothing is being displayed…

Comments are closed.