Hello @Samuel,

Currently it would be easier to remove that effect rather than making them clickable.
For removing that hovering effect, you need to add simple Custom CSS.
To add custom CSS Go to Admin Panel -> Appearance -> Customize -> Theme Options -> Custom CSS Options.
Here you will see a box to write custom CSS.Paste below code there.

.single-circle-icon  span i:hover{
background-color:#E74C3C  ;
}

Note: We assume you have not changed the default icon colors.

Alternatively, you can make them clickable but need some customization. You need to create child theme and modifying some file.

Let us know what you are willing to do.

Regards!!

Considering that you have already created and activated child theme we would like you to follow steps below.

Look in main theme’s folder -> inc -> hooks -> front-page , you will find service.php file.
Copy and paste this file in child theme folder with similar folder structure as in parent.
Now you need to find matching beginning and ending line and replace with code below:

<span>
    <a href="<?php the_permalink();?>" >
         <?php if( isset( $evisioncorporatepro_services[$evisioncorporatepro_services_index] ) &&  isset( $evisioncorporatepro_services[$evisioncorporatepro_services_index]['evisioncorporatepro-service-icon'] ) && !empty( $evisioncorporatepro_services[$evisioncorporatepro_services_index]['evisioncorporatepro-service-icon'] ) ){
         echo '<i class="fa '.esc_attr($evisioncorporatepro_services[$evisioncorporatepro_services_index]['evisioncorporatepro-service-icon']).' fa-3x"></i></a>';
        }
           else {
           	echo '<i class="fa fa-desktop fa-3x"></i>';
        	}
        ?>
</span>

Hope this will help you to resolve your issue.

Regards!!!

Well, let me explain all the process in detail . Ignore the earlier folder structure approach. You can delete that folder from child theme.

You just need to copy overall codes carefully from below link and paste it in your functions.php file of child theme just below your current code.

https://goo.gl/LyoaUs

I have tested it in my child theme which is working well.
Hope this will solve your issue let us know if any confusion.

Hello @Samuel,
You just needed to paste that code (above link) in the functions.php file of child theme. No further code customization is needed. However, if your issue is still not solved then we would like to take a look at your child theme’s ‘functions.php’ file. For that, please paste your child theme’s functions.php file codes in the link: https://gist.github.com/ and hit ‘Create public gist’ button and share the link here. That will help us inspect the problem further.

One more thing, please note that the code we shared earlier via link has no such codes like <div class=”col-xs-12 col-sm-4 col-lg-4 col-xl-4 col-dm-height”> as you have mentioned. So, we hope you have pasted the codes carefully.

Kind regards,

Hello @Samuel,
After giving you site URL your issue was all clear and found the actual problem. After inspecting your site it was found that you have used etdashboard plugin for your service section in front page.So all the above suggestions didn’t work.

Now for the solution you need to look into folder named plugins / etdashboard / inc / service /
you will find widget-service.php file.
In this file find below start and ending lines and copy and paste below code in that section.

<div class="single-circle-icon">
	<span>
		<a href="<?php the_permalink();?>" >
 		<?php
			$etdashboard_service_icon = get_post_meta( get_the_ID(), 'service-icon', true );
			if( empty( $etdashboard_service_icon ) ) {
       				$etdashboard_service_icon = 'fa-user';
   			}
 				echo '<i class="fa '.esc_attr( $etdashboard_service_icon ).' fa-3x"></i>';
     		 ?>
      		</a>
       </span>
</div>

And remove previous codes you added in functions.php file of child theme.
Hope this will do the trick for you.

Regards!