How to use font awesome icons in navigation menu

Archive
1

It seems that the icons in Antimatter one page are found in http://fortawesome.github.io/Font-Awesome/icons/ I am hoping to use some of these rather than menu text (to save space when I have several sections). Similar perhaps to the twitter and github icons being used in getgrav menu.

Is this possible? And how would I size the icon?

2

This is the beauty of Grav :slight_smile: This is something I didn’t even think of much less tried, but yes its totally doable.

Because all content is stored in the markdown files and you can add whatever page headers you like, you can add a custom header on each page that defines a fontawesome icon name you want to use.

icon: fa-home

Then you would have to modify the partials/navigation.html.twig to actually reference this icon-name. Something like

<a href="{{ p.url }}"><i class="fa {{ p.header.icon}}"></i> {{ p.menu }}</a>
3

I couldn’t manage it. I made the substitutions as below, but the menu was still text only (taking the title rather than the icon in the .md file I changed).

So, what I have tried: I substituted your line into part of user/themes/antimatter/templates/partials/navigation.html.twig
which is now:

{% macro loop(page) %}
    {% for p in page.children %}
        {% if p.visible %}
            {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
            <li class="{{ current_page }}">
                <a href="{{ p.url }}"><i class="fa {{ p.header.icon}}"></i> {{ p.menu }}</a>
                {% if p.children.count > 0 %}
                    <ul>
                        {{ _self.loop(p) }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

Next I modified one of my .md files to this

title: Contact Us
icon: fa-phone

(I also cleared the cache (don’t know if this was necessary); and I tried with icon: phone)

4

Did you inspect the html/source for the menu? What does it look like? I actually probably know the problem, but really i also want to help you resolve it yourself so you learn :slight_smile:

5

I looked at the HTML source of the rendered page and there was no difference that I could see between the original text version and that produced by the changes for icon as described above (except for the fallback to the page title wihin in that .md file which had the icon: fa-home )

But thanks for your tireless support. In the end I have gotten by with the less lovely use of a couple of unicode char icons. But I am happy to know that it will work and perhaps when I have imbibed more experience I can try again in the future. (right now I couldn’t spend more than the 4 hours that I did on this issue since there is much to do)

6

Regarding the fix, i think you need do put an fa- prefix before the icon name and you will need to add it to both link references, in the macro, and in the initial loop. Also let’s put it in the tag as well

{% macro loop(page) %}
    {% for p in page.children %}
        {% if p.visible %}
            {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
            <li class="{{ current_page }}">
                 <a href="{{ p.url }}">
                    {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
                    {{ p.menu }}
                </a>
                {% if p.children.count > 0 %}
                    <ul>
                        {{ _self.loop(p) }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %} 
{% endmacro %}

<ul class="navigation">
    {% if config.themes.antimatter.dropdown.enabled %}
        {{ _self.loop(pages) }}
    {% else %}
        {% for page in pages.children %}
            {% if page.visible %}
                {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
                <li class="{{ current_page }}">
                    <a href="{{ page.url }}">
                        {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
                        {{ page.menu }}
                    </a>
                </li>
            {% endif %}
        {% endfor %}
    {% endif %}
</ul>

If you still don’t see the <i> tag in between the <a> tag of the menu items, you might want to try a bin/grav clear-cache to flush the cache.

Here it is in action:

http://polydeon.com/monosnap/Blog__Demo_2014-11-16_22-29-53.png

Should work fine!

P.S. I think this is so useful i have added it to the antimatter theme:

7

Hi. This thread is dusty so maybe it’s already been solved somewhere, but oh well… I wanted icons in my modular page nav so here’s what I did (I use the camera icon for example):

  1. Add icon: camera to modular page frontmatter.
  2. Tweak your modular.html.twig file like so:
    2a. Replace this code:
<li class="{{ current_module }}">
    <a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a>
</li>

2b. With this code:

<li class="{{ current_module }}">
  {% if module.header.icon %}
    <a href="#{{ _self.pageLinkName(module.menu) }}"><i class="fa fa-{{ module.header.icon }}"></i> {{ module.menu }}</a>
  {% else %}
    <a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a>
  {% endif %}
</li>

in my case I wanted the icon before the nav text. You can re-position the tag if you want the icon to appear after the text.

Hope this helps someone!
Much <3 to Team Grav!

8

Is there a dynamic method by which to put say font awesome icons exclusively in the header navigation menu, and text navigation links exclusively in the side navigation menu?

9

No, it’s something you would have to setup yourself. Pages that are ‘visible’ by default show up in the menu. You could add a taxonomy type in certain pages, and then build a menu via a collection using that taxonomy type for a sidemenu.