How to make icons clickable

Hello wonderful X theme forum experts!

Thank you again for all the support so far :slight_smile:

Was wondering if it is possible to make the icons in panels 4 and 5 of my landing page (www.perfectstatement.co.uk) clickable - so they direct to a new webpage?

If so would love to know how! I have read a few other posts about wrapping but have no idea how that works. Thanks!

Hi @AndrewM94,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

First, please add this to Theme Options > JS

jQuery( document ).ready( function($){
  $(".f-box-element").each( function( ) {
    var link_value = $($(this).find("a").get(0)).attr("href");
    var link_element = '<a target="_blank" href="' + link_value + '"></a>';
    $(this).find('.x-feature-box-graphic').wrap(link_element);
  });
});

Now, there are things that you need to do on your Classic Feature Box element before this will work.

Please add a random text on the LINK TEXT, and the page URL where you want to link the Feature Box on the HREF field.

Then add a CLASS f-box-element to your Classic Feature Box

Lastly, add this to Page > CSS to hide the random text.

.f-box-element .x-feature-box-text>a {display: none;}

Hope it helps,
Cheers!

AWESOME! Thanks so much :slight_smile:

We are delighted to assist you with this.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.