Creating Tabs Module with Icons in Tab Titles

YJoumaa
Member

Hi!

 

So I am using the Tabs to Accordion module from https://designers.hubspot.com/code-gallery/entry/founders/esparkbizhubspot-Tabs-to-Accordion-Module.

 

I am tring to add in an icon to the Tab Text. I used the Item Field, and grouped it with the tab_text and tab_content. I tried to implement the following code:

 

{% for item in item.icon_field %}
{% icon
name="{{ item.name }}"
style="{{ item.type }}"
unicode="{{ item.unicode }}"
icon_set="{{ item.icon_set }}"
%}
{% endfor %}

 

between 

 

<ul class="tabs">
{% for item in module.tabs_accordions %}

<li {% if loop.index == 1 %}class="active"{% endif %} rel="tab{{loop.index}}">

 

and

 

{{ item.tab_title }} </li>
{% endfor %}
</ul>

 

But  only the icons are now showing in the Tab and the second tab has a larger Icon for some reason.

I want to get the Icon to the left of the text within the Tab title.

How would I go about this?

 

Also, there are brackets around my text and rich text for some odd reason.

0 Upvotes
8 Replies 8
josh_dev
Contributor

Do you have this up on a test page that I can check out the live version?


hubspot-community-signature.png

 

YJoumaa
Member
0 Upvotes
Indra
Top Contributor | Diamond Partner

Hi @YJoumaa,

 

Did you check your output.

I did setup a codepen with an fontAwsome example. Perhaps this can help you. Go check: https://codepen.io/ind88/pen/gORrwEy

 

For the Hubl code you should change the ul. So it will be something like this:

 

<ul class="tabs">
  {% for item in module.tabs_accordions %}
    <li {% if loop.index == 1 %}class="active"{% endif %} rel="tab{{loop.index}}">
    
      {# Your icon #}
      <img src="{{ item.icon.src }}" />
      
      {# Your tab label #}
      {{ item.tab_title }}
    </li>
  {% endfor %}    
</ul>

 

Or if you use the icon field:

 

<ul class="tabs">
  {% for item in module.tabs_accordions %}
    <li {% if loop.index == 1 %}class="active"{% endif %} rel="tab{{loop.index}}">
    
      {# Your icon #}
      {% icon
        name="{{ item.icon.name }}"
        style="{{ item.icon.type }}"
        unicode="{{ item.icon.unicode }}"
        icon_set="{{ item.icon.icon_set }}"
      %}
      
      {# Your tab label #}
      {{ item.tab_title }}
    </li>
  {% endfor %}    
</ul>

 

For the icon settings. Go and check the tags documentation for all options.

 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution
YJoumaa
Member

Unfortunately, I tried both solutions and neither worked. 😕

0 Upvotes
Indra
Top Contributor | Diamond Partner

Hi @YJoumaa,

 

It looks like your haven't got the right image target since your image src is (unknown).

How are your module fields setup and what type of field do you use?

If you use an image field to get the sourse you shoud use {{ module.image.src }}

 

It you want to know what fields and objects are avalible, you could output all data like:

{{ module|pprint }}


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution
0 Upvotes
YJoumaa
Member

My module fields are set up like so:

 

Screen Shot 2021-09-01 at 11.32.05 AM.png

 

So I don't think using module.image.src would work, as it is an item in a group

0 Upvotes
webdew
Guide | Diamond Partner

Hi @YJoumaa ,


Use like this code and add some style accordigly:

<ul class="tabs">
{% for item in module.tabs_accordions %}
<li {% if loop.index==1 %}class="active" {% endif %} rel="tab{{loop.index}}">
<span>{% for item in item.icon_field %}
{% icon
name="{{ item.name }}"
style="{{ item.type }}"
unicode="{{ item.unicode }}"
icon_set="{{ item.icon_set }}"
%}
{% endfor %}
</span>
{{ item.tab_title }}
</li>
{% endfor %}
</ul>



{# =============== CSS Styling =============== #}
{% require_css %}
<style>
ul.tabs li span svg{ width: 40px; }
@media (max-width:767px){

}

</style>
{% end_require_css%}
{# =============== /CSS Styling =============== #}


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

0 Upvotes
YJoumaa
Member

Awesome, I made the svg width smaller and it worked. Only issue is the brackets, not sure why those are there around the text.

0 Upvotes