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 –

    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!

Need Help With Your Divi Website?



  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!

    • mm

      Your most welcome, glad it worked for you!


Submit a Comment

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