Question posted in
The full documentation can be found here.

Divi theme – How to find graphic file to edit social icon

I am using a WordPress theme called Divi. This isn’t a WordPress question. There are a number of provided social media icons, but I need a Soundcloud icon, and that is not provided. I’m not understanding how these icons are populating the page as they don’t seem to be graphics, but rather are a font? However, I am unable to tell from the source code what is going on (inexperience).

What I’m trying to do is either add an icon of my design, or replace an existing icon. Can someone help point me in the direction if where I should be looking within my files to find the actual icons?

You can see a live site here and the icons are at the top right:
http://rattletree.com/wordpress2/

The dev code has this for the Facebook icon:

<ul class="et-social-icons">

<li class="et-social-icon et-social-facebook">
    <a href="#" class="icon">
        <span>Facebook</span>
    </a>
</li>
</ul>

And the css has this:

.et-social-facebook a.icon:before {
content: "e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}

So that makes me think this is a font, but I don’t know how or where I can edit that font? Thanks for any help!

Tags:

2

Answers


  1. 0

    This looks like the font pack you are using:

    http://www.elegantthemes.com/blog/resources/elegant-icon-font

    It doesn’t look like it has an icon for soundcloud, but you could use the cloud one:

    &#xe002;

    So just add this to the style sheet:

    .et-social-soundcloud a.icon:before {
    content: "e002";
}

    Also, here’s a tutorial:
    https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website

    Login or Signup to reply.
  2. 0

    To add an icon of your design, add the following code to your stylesheet. 

    #top-header .et-social-icon.soundcloud a {
    width: 15px;
    height: 25px;
}
.soundcloud a.icon:before {
    content: "";
    background: url('https://placehold.it/15x25') 100% 100% no-repeat;
    height: 100%;
    width: 100%;
    display: inline-block;
}

    Make sure you create an icon, add the icon image to theme folder and update the url in the above code to point to that image.

    Also add the class soundcloud to your menu in WordPress backend.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search