CMS Development

YJoumaa
Membro

Creating Tabs Module with Icons in Tab Titles

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 Avaliação positiva
8 Respostas 8
webdew
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Creating Tabs Module with Icons in Tab Titles

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 Avaliação positiva
YJoumaa
Membro

Creating Tabs Module with Icons in Tab Titles

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 Avaliação positiva
Indra
Orientador(a) | Parceiro Elite
Orientador(a) | Parceiro Elite

Creating Tabs Module with Icons in Tab Titles

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 }}


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
0 Avaliação positiva
YJoumaa
Membro

Creating Tabs Module with Icons in Tab Titles

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 Avaliação positiva
Indra
Orientador(a) | Parceiro Elite
Orientador(a) | Parceiro Elite

Creating Tabs Module with Icons in Tab Titles

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.

 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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

Creating Tabs Module with Icons in Tab Titles

Unfortunately, I tried both solutions and neither worked. 😕

0 Avaliação positiva
pixl_labs
Colaborador(a)

Creating Tabs Module with Icons in Tab Titles

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


hubspot-community-signature.png

 

YJoumaa
Membro

Creating Tabs Module with Icons in Tab Titles

0 Avaliação positiva