How to Use Custom Icons For Divi Gallery Module

Divi Theme Tutorials

In this quick Divi Theme Tutorial, I am going to show you a fairly simple way to use a custom icon for your Divi gallery, shop or portfolio module overlays.

 

Here are the steps to accomplish this tutorial:

  1. The first step is to create your icon. You will want create so that the height and width are the same (25px X 25px). To do this you will need to use a photo editing program such as Photoshop, Gimp or Paint Shop Pro. If you are not able to create your own custom icon, there are a lot of free icons available for download if you do a little searching on the web.
  2. Next, you will need to upload your custom icon to your website. Once you have it uploaded you will need to copy the URL to the icon.
  3. Next you will need to copy the code below and paste it either into Divi > Theme Options > General > Custom CSS or, if your using a child theme (which I highly recommend), you can add it to Appearance -> Editor.

     
    Here is the CSS code that makes the magic happen –

    .et_overlay:before
    {
    content: url(paste URL from step 2 to your icon here);
    position: absolute;
    top: 55%;
    left: 50%;
    margin: -14px 0 0 -14px;
    font-size: 32px;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    }

 

That’s it, simple right?

You can see an example of this in the gallery below.

I hope you find this simple Divi Theme Tutorial helpful and if you ever need help building your Divi websites, please consider contacting us!

6 Comments

  1. Rob van den Broek

    Dustin replied within a day with the solution.
    I’m using the Fullwidth Portfolio. And the requires a slightly different code.

    Replace the first line of code with the following:

    .et_pb_fullwidth_portfolio .et_overlay:before

    Thank you Dustin!

    Reply
    • Dustin Reed

      Your most welcome, glad it worked for you!

      Reply
  2. Steve

    Hello, thanks for this tutorial. I tried the code for the Image Module and the icon is not appearing.

    Here is the page: http://henryclarke.co/web-design/a-new-site-services/websites/site-editor/

    Here is the code…

    .et_overlay et_pb_inline-icon:before
    {
    content: url(http://henryclarke.co/web-design/wp-content/uploads/2017/03/Logo-FOR-WEBSITE-03292017-smaller.png);
    position: absolute;
    top: 55%;
    left: 50%;
    margin: -14px 0 0 -14px;
    font-size: 32px;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    }

    Let me know what I am missing. Thanks again.

    Reply
    • inovativ

      Hello Steve,

      Thanks for visiting and reading my tutorial!

      Are you using the gallery module? I have not tried it on the image module, but it should work for the gallery module.

      Reply
  3. Heli Soni

    This tutorial seems perfect for me! I tried and is working properly for me! Thank You!

    Reply
    • Dustin Reed

      Glad it worked for you!

      Reply

Submit a Comment

Your email address will not be published.

About The Author

Dustin Reed

Dustin Reed, is the owner and senior web technician for Innovative Solutions Group. He started working at Innovative Solutions Group in 2011 and took over as owner in 2016. He takes great pride in the fact that he truly enjoys doing what he does best, Building Professional Websites! During his 10 years working at Innovative Solutions Group, he has been responsible for many different aspects of the business ranging from creating new accounts/domains on Innovatives server to responsive(mobile-friendly) template creation. Some of his other responsibilities/strengths are WordPress website design, CSS/HTML coding, creating visual animations using Jquery, page layout, and troubleshooting many different types of problems that may arise. When he is not busy working at Innovative Solutions Group, he enjoys doing all of the great outdoor activities that the beautiful state of Montana has to offer. Such as, fishing, camping, hiking and enjoying a day at the lake during the summer.

wordpress maintenance service and security

 

I have been a customer of Innovative Solutions Group since 2013. Dustin is so wonderful to work with. He is patient, professional, and very knowledgeable. Anytime I reach out to the office, they are extremely responsive and address my need VERY quickly. I can't recommend this company enough!!! I am so grateful that I am able to have a successful web-based business, because of them!!Diana FlutieJune 29, 2021
I've worked with Dustin Reed at Innovative Solutions Group now for 2 1/2 years, and am so happy I found them. I came to ISG so frustrated. I'd had my website rebuilt by guys in Pennsylvania, and they never listened to me about anything--from a logo they designed that I didn't like, but they plastered all over the site, to how the site would operate. Dustin and I sat down and within 4 minutes he'd dealt with my most important issues. He continues to be resourceful, making my site much more profitable, and if quick to respond to problems. ISG happens to be close to my home, but I would recommend them to anyone dependable, professional service.eileen ClarkeFebruary 19, 2021
Dustin is great. Quick to respond to any inquiries and reasonable pricing.Nobe Eyecare AssociatesApril 7, 2020
I have been with Dustin and Innovative Solutions for over a year now. Dustin and his company have taken my business to a whole new level. With what they have done with our website and how people find us is amazing. We have grown 10 times over because of Innovative. If your in need of the next level of success in marketing, your in great hands here. You will not be disappointed. Thank you Dustin and the team!!Troy KennettJanuary 15, 2020
Great, courteous and fast service. A very honest business that will not overcharge. Highly recommended!Doseof RealityJanuary 3, 2020
I have used Dustin and his team for years- - exceptional service and Dustin is incredibly responsivejohn scannellApril 23, 2019
Cynthia MonteilSeptember 18, 2017
Excellent service. We have been with Innovative since the launching of our site. They not only designed the entire site with the functionality we wanted, but have hosted it reliably no matter how high the traffic spikes. I would recommend Innovative to anyone looking for a professional, reliable and very responsive team.Susan Duclos (All News PipeLine)September 6, 2017
This group is amazing to work with. We started our partnership a year ago and we could not be happier!Amber DJuly 25, 2017
Work was done in a very timely matter and Dustin was great to work with!Jacob WanderseeJune 19, 2017
I used Dustin at Innovative Solutions to initially just host my website. After working with him I decided to do a pretty significant makeover on my site. He did a great job, was super responsive and has Fletcher in the Design Department to help with graphics and such. He answered inquiries after hours and is very reasonably priced. I have used quite a few web people over the years and Innovative Solutions is undoubtedly who I will continue to use.Gary GavinJune 9, 2017
Super helpful! From the very beginning the designer was patient and offered great suggestions. Very customer friendly. They wanted the site to be perfect for me. Also, ease of billing. Thank you for creating a great site.Serapha CruzJune 3, 2017
I owned the company for over 20 years, and Dustin treats customers in a very courteous and professional manner. That why I'm going back to Innovative for help with our latest personal web project.Daniel DeiningerMay 22, 2017