forestryio / jekyll-menus

A menus (site navigation) plugin for your Jekyll website that also works with https://forestry.io (Jekyll CMS)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature Request: Add a different menu icon to each menu item

oDinZu opened this issue · comments

How would I go about adding a menu icon to each menu item? I am using font-awesome icons and have tested the custom variable option, but haven't had any success.

I have the menus populating, but the icons are missing.

For an example,

#Documentation located here: https://github.com/forestryio/jekyll-menus
---
header:
  - url: /
    title: Home
    identifier: header
  - url: /blog
    title: Journal
    identifier: header
    pre: <i class="fas fa-newspaper fa-1x"></i>
  - url: /products
    title: Shop
    identifier: header
    pre: <i class="fas fa-store fa-1x"></i>
---

My navigation.html file

<!-- Nav -->
  <nav id="menu">
    <ul class="links">
      {% for item in site.menus.header %}
      <li class="menu-item-{{ loop.index }}">
        <a href="{{ item.url }}" title="Go to {{ item.title }}">{{ item.title }}</a>
      {% endfor %}
    </ul>
    <!-- <ul class="actions stacked">
      <li><a href="#" class="button primary fit">Log In</a></li>
    </ul> -->
  </nav>

I discovered how, thank you in advance!

All that was needed is adding {{ item.pre }}

As an example,

<a href="{{ item.url }}" title="Go to {{ item.title }}">{{ item.pre }} {{ item.title }}</a>