[All Adaptavist Apps]
Page History
This tutorial explains how to add icons to your menus in Theme Builder Excerpt
...
2.x...
...
If you've
...
seen
...
our
...
...
...
,
...
you
...
will
...
notice
...
that
...
most
...
items
...
menus
...
have
...
an
...
icon.
...
The
...
icons
...
help
...
to
...
make
...
items
...
more
...
recognisable,
...
especially
...
for
...
regular
...
visitors.
...
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...
...
Icons
...
on
...
the
...
Menu
...
Bar
...
To
...
add
...
an
...
icon
...
to
...
a
...
button
...
on
...
the
...
menu
...
bar,
...
use
...
the
...
following
...
notation:
| No Format |
|---|
} {menuitem}{menulink:home}{menuicon:house} Home{menulink}{menuitem} {menuitem}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]{menuitem} {noformat} |
The
...
icon
...
is
...
included
...
inside
...
the
...
link.
...
This
...
is
...
critical
...
if
...
you
...
want
...
the
...
icon
...
to
...
be
...
displayed
...
properly
...
on
...
the
...
menu
...
bar.
...
To
...
display
...
these
...
icons
...
and
...
links
...
in
...
a
...
menu
...
bar,
...
use
...
the
...
following
...
notation
...
(see
...
...
...
...
for
...
more
...
information):
| No Format |
|---|
} {menubar} {menuitem}{menulink:home}{menuicon:house} Home{menulink}{menuitem} {menuitem}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]{menuitem} {menubar} {noformat} |
As
...
you
...
can
...
see
...
from
...
the
...
notation
...
above,
...
you
...
can
...
either
...
use
...
wiki
...
notation
...
to
...
add
...
the
...
images
...
(see
...
...
...
...
...
...
for
...
more
...
information)
...
or
...
the
...
handy
...
...
...
which
...
provides
...
numerous
...
ready-made
...
icons.
...
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.
...
You
...
can
...
compare
...
the
...
differences
...
between
...
icons
...
on
...
the
...
menu
...
bar
...
(the
...
{menu}
...
lines)
...
and
...
those
...
on
...
pop-up
...
menus
...
/
...
sub-menus
...
(the
...
{menuitem}
...
lines):
| No Format |
|---|
} {menubar} {menu}{menulink:home}{menuicon:house} Home{menulink} {menuitem}{menuicon:house} {menulink:home}Home{menulink}{menuitem} {menu} {menu}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...] {menuitem}!http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...]{menuitem} {menu} {menubar} {noformat} And this is what it will look like in the menu bar: {menubar} {menu}{menulink:home}{menuicon:house} Home{menulink} {menuitem}{menuicon:house} {menulink:home}Home{menulink}{menuitem} {menu} {menu}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...] {menuitem}!http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...]{menuitem} {menu} {menubar} |
Overview
Community Forums
Content Tools
Apps