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:
- 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.
- 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.
- 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);
margin: -14px 0 0 -14px;
-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!