Changing the Divi Phone and Email Icons

How to Replace the Phone / Email Icons with your choice of Icon.

The Divi Theme secondary header lets you add a phone number and email address, and displays these along with a corresponding icon. However, there is no way to change the icon, should you want to do so. Here are a few ways that you can change the phone and email to something better suited to your purposes.

Replacing the Icons with another Elegant Themes Icon

The easiest way to change the icons is to replace them with another of Divi's built-in icons.

Follow that link and scroll to the "Complete Set and Unicode Reference Guide" section and you'll see each icon listed along with a code such as "" (the icon for a mobile phone, in this case). If you remove the "&#x" and ";" you'll get a code (e.g. "e00b") that you can now use in the following CSS to change the phone / email icon:

Replacing the Icon with a Font Awesome Icon

If none of the built-in icons suit your site, you may like to change the icons to one from an extended icon font such as Font Awesome.

First load the Font Awesome icon font into your site. The easiest way to do this is to get the Font Awesome embed code (which they'll email to you). Paste the code you receive into the "Divi > Theme Options > Integrations > Add code to the head of your blog" box.

Then pick the Font Awesome icon you want to use. Click on that icon to get a page of information about it. On that page, in small writing, you'll find the unicode value for the icon, which will be something like "f10b" (which in this case is the code for Font Awesome's own mobile phone icon). You can now use the code with one of the CSS blocks below:

Changing the Icons to an Image

If you'd like to use your own image file to replace the icon, Eileen at Elegant Marketplace has written a post on how to change the phone icon to an image.

If you want to replace the email icon instead, you'd just need to replace the instances of "et-info-phone" in that tutorial with "et-info-email".

I suggest trying that out, but let me know in the comments if you need any help with it.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Louis

    Thanks, Dan! I had the phone icon there before, but I think the sign of the times suggest no one really uses a telephone anymore and I thought I update with an image of a mobile phone. Also, I added a vertical-align: 2px to have the image of the mobile phone align with the text in case anyone was interested.

    Reply
    • dan

      You're welcome, Louis. Yeah, updating the icon to a mobile phone makes a lot of sense. Thanks for the alignment tip 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *