FROM CACHE - en_header

Add Font Awesome Icons In Front Of Navbar Menu Links?

snowleopard25
New Member
2 0 0

Hi,

 

I'm using Debut theme and I want to add fa-fa-home and other font awesome icons in front of my Main Menu links in nav bar.

 

Just like this: https://buddha-mega-menu.myshopify.com/

 

That app works to change it to add fa-fa- icons but I do not like how the dropdown child menus look/behave on Debut theme in mobile view with that app unfortunately.

 

So I'm looking to only add the icons in the navbar main menu.. but don't know how to do this.

 

As a basic example, when I inspect element on my site I'm pretty sure I need to add fa-fa-home etc like below to html code. However I do not know where to find this code in shopify theme folders in order to edit it?

 

<ul>
	
<li><i class="fa fa-home"></i>Menu Link 1</li>
<li><i class="fa fa-home"></i>Menu Link 2</li>
<li><i class="fa fa-home"></i>Menu Link 3</li>
<li><i class="fa fa-home"></i>Menu Link 4</li>
<li><i class="fa fa-home"></i>Menu Link 5</li>
<li><i class="fa fa-home"></i>Menu Link 6</li>

</ul>


</div>

Does anyone know how I can add font awesome icons in front of my nav bar main menu links? 

 

Thanks!

 

 

Replies 3 (3)
Jasoliya
Shopify Expert
4532 586 1147

Hi,

For that you have to add Font-Awesome library in your theme.liquid file in head.

and then you can use this icon.

Check here

Let me know if you need help.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Ninthony
Shopify Partner
2272 342 968

Yeah finding stuff can be a little hard at first. Here's a little course that kind of walks you through everything in Shopify, and it was really helpful to me when I first started:

 

https://www.skillshare.com/classes/Shopify-Essentials-for-Web-Developers-From-Store-Setup-to-Custom-...

 

You just need to make a skillshare account to view the course, which is free. 

 

You just kind of have to track things down, because things in Shopify (especially in pre-designed themes) are done very modular, broken up into more easily editable bits. So to track something down you'll usually want to start with your theme.liquid. If you open theme.liquid and scroll down you'll see something like this:

 

{% section 'header' %}


  <div class="page-container" id="PageContainer">

    <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% section 'footer' %}

So where {% section 'header' %} appears, that's basically like an include in PHP. It's referencing a "Section" file called "header.liquid". So that's probably where your navigation is going to be. So head over to your sections folder and open header.liquid. Now there's a whole bunch of stuff in there. When you see thinks like:

 

{% if section.settings.align_logo == "left" %}
//Some Content
{% else %}
//Some Other content
{% endif %}

That's referring to settings that you have set through your visual editor(the UI you get when you press the Customize button in Online Store > Themes). So don't let all that confuse you or anything. What you're looking for is your navigation, since this is up to HTML5 specs, you can probably just Ctrl + F for "<nav" to find wherever your navigation starts. So when I do that, I find this:

 

        <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
          {% if template == "blog" %}
          {% include 'blog-nav' %}
          {% else %}
          {% include 'site-nav' %}
          {% endif %}
        </nav>

This is what mine looks like because I have already made edits to my default Debut theme. Someone else wanted to know how they would swap out navs if you were viewing their blog page, which can be achieved kind of like this. You're probably looking for "site-nav". When you see something with an include:

 

{% include 'site-nav' %}

It's pretty much the same thing as {% section 'header' %} -- Except that include is referencing a "Snippet". So go into your snippets folder and open "site-nav.liquid". This is the file you're going to want to edit. It's already set up to handle nested navigation and give you dropdowns, so there's a bunch of liquid in there. But you're just wanting to edit the first level. So the file opens up with this:

 

<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
  {% for link in linklists[section.settings.main_linklist].links %}

That's the opening of the ul, and then the next line is a forloop that is looping through each of the links for whatever you have set as the default link list in your Visual Editor (again, the Customize button).  Since you're going to want to have different icons for each link, you can reference the link's handle to set up some string variables to correlate to your font awesome icons using an if else statement inside of the forloop:

 

<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
  {% for link in linklists[section.settings.main_linklist].links %}
    {%- assign child_list_handle = link.title | handleize -%}

<!-- Start of if statement -->
{% if link.handle == "home" %}
{% assign fontAwesomeIcon = 'fa fa-home' %}
{% elsif link.handle == 'contact' %}
{% assign fontAwesomeIcon = 'fa fa-phone' %}
{% else %}
{% assign fontAwesomeIcon = false %} {% endif %} <!-- End if statement --> {% comment %} Check if third-level nav exists on each parent link. {% endcomment %} {%- assign three_level_nav = false -%} {% if link.links != blank %} {% if link.levels == 2 %} {%- assign three_level_nav = true -%} {% endif %} {% endif %} {% if link.links != blank %} <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}"> <button class="site-nav__link site-nav__link--main site-nav__link--button"{% if link.active %} aria-current="page"{% endif %} type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
<!-- here is the output for the forloop, you will want to make an if statement to check for fontAwesomeIcon -->
{% if fontAwesomeIcon %}<i class="{{ fontAwesomeIcon }}"></i>{% endif %}{{ link.title }} {% include 'icon-chevron-down' %} </button>

Basically something like that.

 

Oh yeah and of course, link to font awesome inside theme.liquid

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
resphichen
Tourist
4 0 4

I just deployed it by myself! Follow the steps and then you can make it too:
1)  Register your email with Font Awesome to receive the code.

https://fontawesome.com/start

2) Paste the CDN embed code they sent to your theme.liquid (after <head> but before </head>), or paste your kit's code (after you register your Font Awesome CDN account, click to confirm your email address + set things up).

3) Refer to the icon list (see link below), and insert <i class="fa fa-######"></i> to show the icon. ###### would be the name on the icon list.

https://fontawesome.com/v4.7.0/icons/