How to Add Icons on Image Gallery Thumbnails in WordPress

by Waseem Abbas on Oct 5, 2017

Do you want to add custom icons on hover to your gallery thumbnails? Sometimes you may need to modify your image galleries to display icons on thumbnails, so the image open up in the lightbox view on click. In this tutorial, we will share how to add icons on image gallery thumbnails in WordPress.

By default, WordPress galleries are simple and only allow you to add your photos as a very basic gallery. We recommend you to use the Envira Gallery plugin that has tons of great features to customize your image galleries.

To add icons on image gallery thumbnails in WordPress, you’ll need to follow these 4 steps:

• Step 1. Install and activate Frontend Dashicons plugin
• Step 2. Install and activate Envira Gallery plugin
• Step 3. Create an image gallery on your WordPress site
• Step 4. Edit CSS file of your theme and add the code
• Step 5. Display the image gallery on the page/post

By the end of this tutorial, you’ll be able to display the icons on image gallery thumbnails that will appear on hover and will look like as shown in this image below:

Ready to get started? Let’s go!

Step 1: Install and Activate Frontend Dashicons Plugin

The first thing you need to do is to install and activate the Frontend Dashicons plugin on your WordPress website.

Don’t know about installing the plugin on your site? You should check out this guide on how to install a WordPress plugin.

Step 2: Install and Activate Envira Gallery Plugin

Next thing you need to do is install and activate Envira Gallery plugin on your WordPress admin backend.

To learn more about the installation, you should check out this guide on how to install Envira in WordPress.

Step 3: Create an Image Gallery on Your WordPress Site

Upon activating the plugin, you should go to Envira Gallery » Add New to create a new image gallery on your site. Start by adding the title and drop your photos in the Native Envira Gallery section.

Click on the Publish button to the right side of your screen. For more gallery settings, you should check out this guide on how to create an image gallery with thumbnails in WordPress.

Step 4: Edit CSS File of Your Theme and Add the Code

After publishing your image gallery, you should go to Appearance » Editor to edit CSS of your theme. Add this below given code snippet in your CSS file:

#envira-gallery-wrap-4454 a.envira-gallery-link {

   display: block;
   height: 100%;
   width: 100%;
   background-color: rgba(255,255,255,.8);
}

#envira-gallery-wrap-4454 a.envira-gallery-link:hover:before {

   content: "\f179";
   font-family: dashicons;
   font-size: 24px;
   color: black;
   position: absolute;
   text-align: center;
   top: 50%;
   left: 50%;
}

#envira-gallery-wrap-4454 a.envira-gallery-link:hover img {

   opacity: .5 !important;
}

In this snippet, 4454 is the Envira gallery code that targets the image gallery in which you need to display the icons on the thumbnails. You should replace 4454 with your image gallery code. You can find your own gallery code in your gallery shortcode (as shown in the image in the next step).

Make sure to save this file.

Step 5: Display the Image Gallery on the Page/Post

Now edit your image gallery that you created previously and copy the shortcode from the Envira Gallery Code widget.

To display the image gallery, you should go to Pages/Posts » Add New or edit an existing page/post. In the visual editor, you need to paste the shortcode.

Make sure to click on the Update button.

Go ahead and visit your site to see the icons on image gallery thumbnails that will look like as shown in this image below:

We hope this tutorial has helped you to learn how to add icons on image gallery thumbnails in WordPress. You may also want to check out our guide on how to add blurbs with icons in WordPress. In case, your site is facing problems, check this guide on how to fix the 25 most common WordPress errors.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress tips, guides, and resources.