# Hyperlink an Icon on a template using HubL

**URL:** <https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859>\
**Category:** CMS Development\
**Created:** [November 8, 2018, 3:42pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859 "2018-11-08T15:42:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aiellog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aiellog/32/25270_2.png) [@aiellog](https://community.hubspot.com/u/aiellog)\
**Post date:** [November 8, 2018, 3:42pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/1 "2018-11-08T15:42:55Z")

</div>

I am using a template for a landing page that has most parts of it interactable simply through the design editor however, there are these icons on the template such as a cog, or mobile phone that are just static and not interactable. I want to be able to hyhperlink these icons so that when clicked they redirect to certain pages. I looked into the html version of the template and found a line of code:

{% custom\_widget “kula\_offer\_default\_icon\_1” widget\_name=“Kula Offer - Icon”, column\_width=“one-third”, icon\_custom\_class=“fa-cog”, caption=“\<strong\>Plenty of Settings\</strong\>\<br /\>Kitoum allows offers a wide-assortment of settings that you can adjust to create completely bespoke web-based offers.” %}

that seems to be where the icon exists however, I can’t figure out a way to hyperlink the icon. Is it possible to do this from editing this line of code, if not, what would I have to do to hyperlink an icon on the template?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 8, 2018, 4:20pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/2 "2018-11-08T16:20:47Z")

</div>

Hi @aiellog,

try this:

`<a href="YOUR LINK GOES HERE">{% custom_widget "kula_offer_default_icon_1" widget_name="Kula Offer - Icon", column_width="one-third", icon_custom_class="fa-cog", caption="<strong>Plenty of Settings</strong><br />Kitoum allows offers a wide-assortment of settings that you can adjust to create completely bespoke web-based offers." %}</a>`

you can insert a text-widget/-module inside the href=“” part to have the ability to insert custom links.

you could also insert some boolean options to have something like “open in new tab” or rel=“nofollow”

to do add a boolean widget to your module( For example: “Open in new Tab?”). Your code should look something like this

`<a href="" {% if module.open_in_new_tab %}target="_blank"{% endif %}><!-- YOUR MODULE CODE --> </a>`

regards

Anton

| ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71232bb65bd029237c40010174d30ea2bb57cbd6.png) | Did my post help answer your query? Help the Community by marking it as a solution |  
| — | — |

---

<div class="post-metadata">

**Author:** ![aiellog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aiellog/32/25270_2.png) [@aiellog](https://community.hubspot.com/u/aiellog)\
**Post date:** [November 8, 2018, 4:43pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/3 "2018-11-08T16:43:05Z")

</div>

[@AntonB](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72313)

Thank you for your response however, I tried what you suggested :

\<a href=“[https://www.datamotion.com](https://www.datamotion.com)”\>{% custom\_widget “kula\_offer\_default\_icon\_1” widget\_name=“Kula Offer - Icon”, column\_width=“one-third”, icon\_custom\_class=“fa-cog”, caption=“\<strong\>Plenty of Settings\</strong\>\<br /\>Kitoum allows offers a wide-assortment of settings that you can adjust to create completely bespoke web-based offers.” %}\</a\>

and still when I hover over the icon in live preview nothing changes, I still can’t click the icon as you can see in the attached image.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 8, 2018, 6:35pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/4 "2018-11-08T18:35:32Z")

</div>

Hi @aiellog,

hmm strange… Could you please provide a preview link(the one without preview options) from the page/template?

regards

Anton

---

<div class="post-metadata">

**Author:** ![aiellog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aiellog/32/25270_2.png) [@aiellog](https://community.hubspot.com/u/aiellog)\
**Post date:** [November 8, 2018, 6:41pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/5 "2018-11-08T18:41:47Z")

</div>

[@AntonB](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72313)

[https://preview.hs-sites.com/\_hcms/preview/template/multi?domain=undefined&portalId=219987&tc\_deviceCategory=undefined&template\_file\_path=landing\_page\_basic/Kitoum\_eBook\_Template\_v2\_Copy\_copy\_2.html&updated=1541696776369](https://preview.hs-sites.com/_hcms/preview/template/multi?domain=undefined&portalId=219987&tc_deviceCategory=undefined&template_file_path=landing_page_basic/Kitoum_eBook_Template_v2_Copy_copy_2.html&updated=1541696776369)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 8, 2018, 7:10pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/6 "2018-11-08T19:10:10Z")

</div>

@aiellog,

I’ve checked your page with the google inspector(CMD+Option+I on Mac; STRG+Shift+I on Windows) and couldn’t find the link you’ve inserted. Did you applied/published the link?

Also I’ve tried to insert a link manually with the inspector(working only till I reload the page). It worked - but it’s not the best solution to apply the link to the module code. A better way would be to apply the link to following div:

`<div class="kula-offer-icon">`

this is the div which contains the icon.

Can you see/edit it in your module/template? If yes, apply the link as following

```auto
<a href="YOUR LINK">
<div class="kula-offer-icon">
<i class="fa {{probably-the-icon-widget}}"></i>
</div>
</a>

```

regards

Anton

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 8, 2018, 10:00pm UTC](https://community.hubspot.com/t/hyperlink-an-icon-on-a-template-using-hubl/10859/7 "2018-11-08T22:00:58Z")

</div>

After some deeper research on the template([Kitoum\_eBook\_Template](https://app.hubspot.com/marketplace/5024985/products/kula-partners/kula-offer)) here’s the solution/tutoial to add a custom link to the icon module.

1. add a text widget to the module

 ![Bildschirmfoto 2018-11-08 um 22.33.21.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/1/d1cfe7f08b7cbbbd3dc0edd96f43bf6e4390f2ac.png)

2. give it a name (and a “prefilled” link)

 ![Bildschirmfoto 2018-11-08 um 22.35.56.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/8/38d3a7f60ee685874dc4e13f7a75b1b7d96ab37c.png)

3. copy the value of the widget

 ![Bildschirmfoto 2018-11-08 um 22.37.22.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/b/b01f24d0b1a3f7fbfd8bccc1f887422af306d92b.png)

4. insert it into the “href part” and publish the changes.

![Bildschirmfoto 2018-11-08 um 22.38.18.png](https://d2qpr2jzcazej7.cloudfront.net/optimized/3X/b/9/b9fa49d97ad355acf61d7ed4f5e699b268f0c1ab_2_690x69.png)

5. open your page(which uses the template) and click on the certain module. You’ll find the link-field at the very bottom on the left side

 ![Bildschirmfoto 2018-11-08 um 22.40.54.png](https://d2qpr2jzcazej7.cloudfront.net/original/1X/ec7d1734f8386cb16b0f8088619e5dcc599d6e43.png)

6. change the value of it, save it and you’re ready to go

regards

Anton

| ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71232bb65bd029237c40010174d30ea2bb57cbd6.png) | Did my post help answer your query? Help the Community by marking it as a solution |  
| — | — |