How to link an Icon Element

Support
#6

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

#7

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!

#8

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.

#9

oops… THANK YOU!

#10

You are most welcome. :slight_smile:

#11

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);
	});
}):
#12

Thanks for sharing @redpupmedia.

#13

great idea! thank you!!

#14

Glad it helped.

Cheers!

#15

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

#16

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.

#17

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.

#18

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!

#19

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?

#20

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

#21

Hi Joao,

Thanks for the code.

I’ve tried to add the it both places, but unfortunately it does not have an impact on the positioning of the boxes.

#22

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#23

Sure and thank you for helping.

#24

Hi again,

Thank you for the credentials. I went ahead and changed the previous code to this:

@media screen and (min-width: 979px) {
	#infografik_1, #infografik_2, #infografik_3, #infografik_4 {
    	display: inline-block;
	}
}

Please clear your browser’s cache and reload the site.

Cheers!

#25

Hi Nabeel,

That’s amazing and thank you!