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 –.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!
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!
Your most welcome, glad it worked for you!
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.
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.
This tutorial seems perfect for me! I tried and is working properly for me! Thank You!
Glad it worked for you!