Changing the Divi Phone and Email Icons

This post may contain referral links which may earn a commission for this site

Changing the Divi Phone and Email Icons

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

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Replacing the Icons with another Elegant Themes Icon

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Replacing the Icon with a Font Awesome Icon

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Want get more out of Divi?

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

6 Comments

  1. All good, I worked it out. Set the default to what I wanted and created a query that worked for the tablet minimum width to what is in place already.

    Reply
    • Okay, great! Thanks for the update, Grant, and I'm glad you got it sorted.

      Reply
  2. Hi there,

    Wondering if you can help. On this site using the Divi Builder https://www.payrollmatters.co.nz/,
    for the phone styling I am trying to get top of page phone number and email address to float:right. If I add float:right to the element (e.g. #et-info-phone) in the browser css console I get what I want but adding this to the site styles in a media query targeting max-width:475 it doesn't work. Where do I find a styles setting to override the Divi styles?

    Reply
  3. 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
    • You're welcome, Louis. Yeah, updating the icon to a mobile phone makes a lot of sense. Thanks for the alignment tip 🙂

      Reply
    • Thank you for this Louis, the default email icon vertical alignment has been bugging me for a while. In my case, I set it to -1 px. Can't believe I haven't thought of this before!

      #et-info-email:before {
      vertical-align: -1px!important;
      }

      Reply

Submit a Comment

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

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

6 Comments

  1. All good, I worked it out. Set the default to what I wanted and created a query that worked for the tablet minimum width to what is in place already.

    Reply
    • Okay, great! Thanks for the update, Grant, and I'm glad you got it sorted.

      Reply
  2. Hi there,

    Wondering if you can help. On this site using the Divi Builder https://www.payrollmatters.co.nz/,
    for the phone styling I am trying to get top of page phone number and email address to float:right. If I add float:right to the element (e.g. #et-info-phone) in the browser css console I get what I want but adding this to the site styles in a media query targeting max-width:475 it doesn't work. Where do I find a styles setting to override the Divi styles?

    Reply
  3. 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
    • You're welcome, Louis. Yeah, updating the icon to a mobile phone makes a lot of sense. Thanks for the alignment tip 🙂

      Reply
    • Thank you for this Louis, the default email icon vertical alignment has been bugging me for a while. In my case, I set it to -1 px. Can't believe I haven't thought of this before!

      #et-info-email:before {
      vertical-align: -1px!important;
      }

      Reply

Submit a Comment

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