How to link an Icon Element

Hi there,

how do i link an icon element, or at least the whole column?!
At the moment i am just able to link the text below the icon…

Thanks in advance! Pascal

I have this same question.

Hi guys,

It could be achieved by the custom javascript.

First you have to set the ID for your columns(ex: linked-column-1, linked-column-2).

After that add the following code under Customizer > Custom > Global CSS:

jQuery(document).ready(function($){
	$("#linked-column-1").wrap('<a href="http://aaa.co.nz/link-1/" />');
	$("#linked-column-2").wrap('<a href="http://aaa.co.nz/link-2/" />');
});

Hi thai :blush:
Thx for your answer! I’ll check it after my holidays and let you know.
Pascal

i am implementing the same thing, hoping to link a whole Feature Box but it failed.

here is how i modified the global CSS

jQuery(document).ready(function($){
$("#mfb-strobe").wrap(’’);
});

Just to confirm, I did assign an ID of mfb-strobe to the whole feature box

What am i doing wrong?
THANKS!

Hi,

Kindly change your code to this.

jQuery(document).ready(function($){
	$("#mfb-strobe").wrap('<a href="http://flashfogsecurity.com/testwordpress/security-fog-security-smoke-smash-and-grab-burglary/"></a>');
});

Make sure to use unique ids for each featurebox

Thanks

hello
still not working…

Here is what my CSS looks like

https://www.screencast.com/t/F8K0gDJPcI

here it is in CS

https://www.screencast.com/t/yOfpTvXNf6l

thanks!

Hello @flashfog,

Please add the JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

Hope this helps. Kindly let us know.

oops… THANK YOU!

You are most welcome. :slight_smile:

If it helps… Here is the JS we use on Feature Boxes. We add a class on the column or row around each individual Feature Box (.class-on-item-around-feature-box), then add this Globally.
This makes the entire FB use the same link as is assigned to the button inside it.

jQuery( document ).ready( function($){
	$(".class-on-item-around-feature-box").each( function( ) {
		var link_value = jQuery(this).find(".x-btn").attr("href");
		var link_element = '<a href="' + link_value + '"></a>';
		jQuery(this).find('.x-feature-box').wrap(link_element);
	});
}):

Thanks for sharing @redpupmedia.

great idea! thank you!!

Glad it helped.

Cheers!

Hi guys,

I’m struggling with this too and have tried to follow the instructions above.

It works if I apply the code in global JS for just one feature box, but when I add the code for more boxes the code stops working. Each feature box has been given unique ids, as stated above.
Maybe you can see why the code is not working for me.

jQuery(document).ready(function($){

$("#infografik_1").wrap(’’);

$("#infografik_2”).wrap(’’);

$("#infografik_3”).wrap(’’);

$("#infografik_4”).wrap(’’);

});

Best regards,
Carina

Hi Carina,

That code is supposed to work. Can you give us the URL where that code is supposed to work so we can check the setup directly? Make sure that you are not using curly quotes. That will give you error and prevent the code from working.

Hi Lely,

Sure, http://redrive.dk

Right now I’ve only applied the code on the first feature box - and the code is working. But when I apply the above code (including links) the code is not working at all.

Hi again,

The code for the other feature boxes doesn’t work because of the invalid quotes (pretty quotes). please use this code instead:

$("#infografik_1").wrap('');

$("#infografik_2").wrap('');

$("#infografik_3").wrap('');

$("#infografik_4").wrap('');

This will work as expected. Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

Hi Nabeel,

Thanks for the code, now it works on all feature boxes! However, the boxes are now aligned vertically and not horizontally. (When I remove the code, the boxes are aligned horizontally again.)

Can you help solve this as well?

Hi There,

Please add the following CSS as well to Cornerstone CSS or Theme Options CSS

@media(max-width: 969px) {
#infografik_1, #infografik_2, #infografik_3, #infografik_4 {

    float: right !important;
}}

Let us know how it goes