Forum Support

Shape 5
March 28, 2024, 09:08:28 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to make ION icons clickable links?  (Read 607 times)
jeromydp
Jr. Member
**
Offline Offline

Posts: 28



« on: May 25, 2017, 03:26:27 PM »

My HTML isn't very strong, when I tried to make clickable links I messed up the formatting. Using the HTML in the Accordion Menu & Icons section, how would I adjust the code so that the icons could be clickable? Thanks!
Logged
batdan
Jr. Member
**
Offline Offline

Posts: 3



« Reply #1 on: May 26, 2017, 12:44:43 AM »

I needed to achieve something similar and used the following to make some of my ION icons clickable.

<a href="http://www.google.com" title="Click for more information"> <i class="info_pictures_icon ion-social-usd"> [/url]


This may help you?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #2 on: May 26, 2017, 07:16:38 AM »

Hello,

Yes, as batdan above pointed out you'll need a <a href=""> wrapped around the icon.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
jeromydp
Jr. Member
**
Offline Offline

Posts: 28



« Reply #3 on: May 29, 2017, 08:10:16 PM »

Thank you! It's working perfectly
Logged
jeromydp
Jr. Member
**
Offline Offline

Posts: 28



« Reply #4 on: May 31, 2017, 12:57:02 PM »

I spoke a little too soon. My ION icons are linking just fine, but now I am finding that when I put the S5 Map extension below it, no matter where I click on the map, it links to the last link of my ION icons. How do I stop the text in the custom HTML module to affect the content below it?

Here is the HTML text I'm using:
<div class="icon_group">

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s">
<div class="icon_group_icon">
<a href="index.php/i-m-a-parent" title="Click for more information">
<i class="ion-ios-home"></url>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">I'm a Parent</span>
Learn how your child might receive help from the We Heart Deer Park event.
</div>
</div>

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s, wait 0.2s">
<div class="icon_group_icon">
<a href="index.php/host-a-booth" title="Click for more information about hosting a booth.">
<i class="ion-ios-people"></url>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">I'm a Business or Organization</span>
Sign up your organization to make a difference at this year's event!.
</div>
</div>

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s, wait 0.4s">
<div class="icon_group_icon">
<a href="index.php/support-the-cause" title="Support a Student">
<i class="ion-ios-heart"></url>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">Support a Student</span>
Help us reach our $3500 goal by providing a financial gift to support one or more students.
</div>
</div>

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s, wait 0.6s">
<div class="icon_group_icon">
<a href="index.php/questions-page" title="Click for more information">
<i class="ion-information-circled"></url>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">Find Out More Information</span>
I still have questions about the upcoming We Heart Deer Park event..
</div>
</div>
</div>
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: June 01, 2017, 05:11:24 AM »

Hello,

You don't have a closing [/url] call on any of your links, that would need to be called after the element that is being linked, so for example it would go after this:

<i class="ion-information-circled"></url>
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #6 on: June 01, 2017, 05:12:39 AM »

Hello,

Our forum software is formatting the code because it views it as an actual link. I have uploaded an example in a text file for you.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
jeromydp
Jr. Member
**
Offline Offline

Posts: 28



« Reply #7 on: June 01, 2017, 10:47:24 AM »

You're a life saver! Thanks again!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.