[eyediaParticipant]

Hi there,
I’m wondering how to make the icon in a feature box into a link? I was able to make the tile into a link, but it would make the most sense to also have the icon link. You can see my page here: http://eyedialabs.ca/kamgilani/

They are the icons on the homepage in green that i’d like to make links

[ThaiModerator]

Hi There,

Please add the following code under Customizer > Custom > Global Javascript:

jQuery(function($){
	$(document).ready(function(){
		$(".x-feature-box").each(function(index, el) {
			var link = $(this).find(".x-feature-box-content h4 a").attr('href');
			if(link){
				$(this).find(".x-feature-box-graphic-inner i").wrap('<a href="'+link+'"></a>');
			}
		});
	});
});

Hope it helps 🙂

[eyediaParticipant]

Brilliant! You guys are the best!

I just added a bit of css to remove the border on focus as it added a line down the middle and around the icon circle as shown in the attached images. Just in case it helps someone else.

.x-feature-box a:focus {
  outline: 0px auto #5aba47 !important;
}

Thanks again!

Jenna

[RahulModerator]

Hey there,

Your screenshot failed to upload due to file size restriction. Please reduce its size below 512kb and upload again.

Thanks.

[Author]

Posts