Hey
Kami, Scott asked me if I had some insight on your question and I thought, "what better opportunity is there for a support swan song than this"? Let's do this! GRAND FINALE!
So, you want to add icons to your navigation menu items. No problem! First, ask yourself: do you already have icons? Maybe you've got some images drawn up (such as in your case, I imagine)? If not, I recommend a library like
Font Awesome. It's great -- you drop a quick <link> element in the <head> section of your theme, and all of a sudden you're ready to drop icons
like the paint brush anywhere in the theme's HTML with easy codes like this:
<i class="fa fa-paint-brush" aria-hidden="true"></i>Stopping there doesn't answer your original question, though, which is how to get the icons on specific nav bar items. Well, as you probably know, the nav bar items are generated by a {foreach} loop in the Forum Wrapper template that creates every nav menu item you've set in the admin panel, which makes things tricky if you want a different icon for different items. We ain't playing with static HTML no more.
There are two main ways we could accomplish this: via the
layout templates, to add icons as the page loads,
or
via
JavaScript, to add them after the page has finished loading.
I'll focus on the template method because it's a little less technical, and it comes with the added benefit of not having a weird page-jump effect that distracts visitors when JavaScript adds new elements in after the fact.
Take your nav menu code as an example:
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}The name, of course, is printed by that variable $[navigation.menu.name]. We know we want our icon to be just before that. To target specific nav menu items, we need to use {if} blocks
inside this loop to check which one it is. Then, if it's the right one, we add the corresponding icon before the name.
So instead, we'd have a code like this.
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active" {/if} href="$[navigation.menu.href]" {if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]" {/if}>
{if $[navigation.menu.name] == "Home"}
<ELEMENT FOR HOME ICON HERE>
{elseif $[navigation.menu.name] == "Search"}
<ELEMENT FOR SEARCH ICON HERE>
{/if}
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
the <ELEMENT> you see could be a piece of Font Awesome HTML, or an <img> with a src leading to an icon you designed -- whatever works.
I hope that helps to clarify! For each of nav items that you'd want to have an icon, you'd just add in additional logic to this section to account for it. Unfortunately, as you might have figured, you have to know the name of the item if you're going to add an icon to it, so anytime you add a new nav item you'll need to add more code if you want it to have an icon.
BOOM. MIC DROP. LAST SUPPORT POST EVER ON MY LAST DAY. HOPEFULLY IT MAKES SENSE.
