Trying to add icons in front of menu title in footer (Boundless Theme)

Tourist
6 0 1

Anyone knows how to add different icons in front of the menu titles in the footer section?

I managed to add the fontawesome icon, but it adds the same icon in front of all menu titles and I want to be able to add speciffic icons in front of each menu title. I have attached picture refference of the footer looks and part of the footer.liquid to where I made the change. Please help.

IMG_7468.JPGIMG_7467.JPG

0 Likes
Highlighted
Shopify Partner
173 37 42
Hello @Szabi,
 
Replace this code
<ul class="list--inline site-footer__linklist">
.....
</ul>
 
 
{% footer_links = linklists[section.settings.footer_link_list].links %}
<ul class="list--inline site-footer__linklist">
<li class="h4"><a href="{{footer_links[0].url}}"><i class="fas fa-phone-square-alt">{{footer_links[0].title}}</i></a></li>
<li class="h4"><a href="{{footer_links[1].url}}"><i class="fas fa-shipping-fast">{{footer_links[1].title}}</i></a></li>
<li class="h4"><a href="{{footer_links[2].url}}"><i class="fas fa-envelope">{{footer_links[2].title}}</i></a></li>
<li class="h4"><a href="{{footer_links[3].url}}"><i class="fas fa-envelope">{{footer_links[3].title}}</i></a></li>
</ul>

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

0 Likes
Highlighted
Tourist
6 0 1

Hi @Wahab_Ahmad,

 

Thank you for the quick reply and solution!

How can I have the text title showing too?

 

Screen Shot 2020-02-29 at 12.20.51 AM.png

0 Likes
Highlighted
Shopify Partner
173 37 42

replace this

 

{% footer_links = linklists[section.settings.footer_link_list].links %}
<ul class="list--inline site-footer__linklist">
<li class="h4"><a href="{{footer_links[0].url}}"><i class="fas fa-phone-square-alt"></i>{{footer_links[0].title}}</a></li>
<li class="h4"><a href="{{footer_links[1].url}}"><i class="fas fa-shipping-fast"></i>{{footer_links[1].title}}</a></li>
<li class="h4"><a href="{{footer_links[2].url}}"><i class="fas fa-envelope"></i>{{footer_links[2].title}}</a></li>
<li class="h4"><a href="{{footer_links[3].url}}"><i class="fas fa-envelope"></i>{{footer_links[3].title}}</a></li>
</ul>

0 Likes
Highlighted
Tourist
6 0 1

Also, now that I added all the proper icons and tested, they lead nowhere. All it does is refresh the page, but does not take me the contact us page or shipping or returns or pulls up the owners manual. So there is no title page and the icons lead nowhere. Thank you!

Screen Shot 2020-02-29 at 1.14.01 AM.png

0 Likes