Using custom icons

NavBar includes a default set of icons (the small black ones). As of this version they can't yet be customized by CSS. However, it's farily easy to use custom icons without modifying your installation of NavBar. For this purpose we use the variable _NavBar_icons_url, if defined, to retrieve the path to icon files.

The default icon set can be found in navbar/icons in the distribution archive.

In order to add a different icon set, create a folder somewhere in your document root and pass the path to it in this variable, before loading the main navbar.js script:

  <script type="text/javascript">
    _NavBar_icons_url = "/navbar_icons/";
  </script>

This directory should contain the following files:

1. arrow-down.png
2. arrow-left.png
3. arrow-right.png
4. arrow-up.png
5. minus.png
6. plus.png
7. sticky-off.png
8. sticky.png
9. sync.png
10. blank.gif -- this should be an 1×1 blank gif, required to show PNG icons in IE. Just copy it from our icons folder.

You can see a working sample in samples/icons.html.