Getting icons to work in Apex Navigation Bar (navbar)

If you are wondering why the icon(s) you specified do not show up in the Navigation Bar of your Apex application, then you can check if the page template, at the height of the Subtemplate, Navigation Bar Entry, contains a definition like this:

<a href="#LINK#" class="txxNavLink">#TEXT#</a>

if that is the case, then you should change it to:

<a href="#LINK#" class="txxNavLink">
<img src="#IMAGE#" alt="#ALT#" height="#HEIGHT#" width="#WIDTH#" />#TEXT#</a>

where txxNavLink can be t1NavLink...t18NavLink or something else depending on which Apex theme you picked initially.



Now you are ready for setting the image (icon) URL to the desired value:


I use a custom application substitution string called "HOME" because i prefer to store the images on the webserver rather than in the Apex repository for better performance, but as i am not the owner of the webserver, i cannot create my own Apache aliases, so this is a sort of workaround.
In your case it can be sufficient to include either #WORKSPACE_IMAGE# or #APP_IMAGES# built-in substitution strings.

Once you have successfully tweaked the template, it's very likely that you'll have to tackle another little layout problem, because this navbar entry template definition now requires an icon for *every* navbar entry.
If in your navigation bar entries there is some text-only link, like the default Logout URL typically, you'll have to choose between one of two possibilities:

1. keep the text only entry and tweak a couple of its attributes;
2. find a suitable icon and use that instead of the text only link.

In my case i picked the first option, then i set the image width and height attributes of the navbar entry to zero. This prevents the browser from displaying an empty image placeholder (32 by 32 pixels typically) for the missing image and will display just the icon subtext.


Hopefully i didn't forget anything else...