Page History

h1. Menu Icons

*{excerpt}This tutorial explains how to add icons to your menus in Theme Builder 1.x...{excerpt}*

If you've seen our [company website|ADAPTAVIST:Overview], you will notice that most items menus have an icon.

The icons help to make items more recognisable, especially for regular visitors.

h2. Icon Requirements

The icons must be 16x16 pixels and can be GIF, JPEG or PNG format. We recommend using GIF icons as they are the most widely supported format that supports transparency.

For avoidance of doubt, you _can not_ use Windows icons (??.ico?? files) or Macintosh icons.

The method for adding icons to menus is slightly different depending on whether you're adding them to the menu bar or one of the pop-up menus...

h2. Icons on the Menu Bar

To add an icon to a button on the menu bar, use the following notation:

{noformat}
* [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...]
* [!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]
{noformat}

If you pasted that in to a page, this is what it would look like:

* [!http://adaptavist.com/glyphs/house.png! Home|USERGUIDE:Home|Back to the home page...]
* [!http://adaptavist.com/glyphs/cubes.png! Builder|USERGUIDE:Builder|Stuff about Builder...]

As you can see, the icon has beenThe icon would be included inside the link. This is critical if you want the icon to be displayed properly on the menu bar, as shown below:

{menubar}
{menuitem} [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...] {menuitem}
{menuitem} [!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...] {menuitem}
{menubar}

h2. Icons in Pop-up Menus and Sub-Menus

The notation to get icons in pop-up menus and sub-menus is almost identical, however the image must be _outside_ the link.

The example below shows the difference between an icon on the menubar (the "Home" link) and an icon in a pop-up menu (the "Builder" link):

{noformat}
* [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...]
** !http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...]
{noformat}

And this is what it will look like in the menu bar:

{menubar}
{menu} [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...]
 {menuitem} !http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...] {menuitem}
{menu}
{menubar}