Documentation Graphics and Filetype icons
This is a Foswiki icon library. The graphics can be used in topics and by web applications.
Usage
Default notation:
%ICON{help}%
results in:
Note that ICON{}
assumes an image of 16 x 16 pixels.
See the tables below for copy-paste examples.
Other usage:
see below.
Graphics
- Set ICONTOPIC=System.DocumentGraphics
- Set RENDERTABLES=
Document icons
Name |
Icon |
Description |
Write... |
airplane |
|
airplane |
%ICON{airplane}% |
alert |
|
alert |
%ICON{alert}% |
award |
|
award |
%ICON{award}% |
barcode |
|
barcode |
%ICON{barcode}% |
bed |
|
bed |
%ICON{bed}% |
bomb |
|
bomb |
%ICON{bomb}% |
book |
|
Book |
%ICON{book}% |
blank |
|
Blank box |
%ICON{blank}% |
blank-bg |
|
Blank box, transparent |
%ICON{blank-bg}% |
bubble |
|
Speech bubble |
%ICON{bubble}% |
bug |
|
bug |
%ICON{bug}% |
chart-bar |
|
chart-bar |
%ICON{chart-bar}% |
chart-pie |
|
chart-pie |
%ICON{chart-pie}% |
cog |
|
cog |
%ICON{cog}% |
comments |
|
comments |
%ICON{comments}% |
connections |
|
connections |
%ICON{connections}% |
database |
|
database |
%ICON{database}% |
days |
|
Days, Calendar |
%ICON{days}% |
detail |
|
detail |
%ICON{detail}% |
download |
|
Download |
%ICON{download}% |
fax |
|
Fax |
%ICON{fax}% |
filter |
|
Filter |
%ICON{filter}% |
food |
|
food |
%ICON{food}% |
gear |
|
Gear |
%ICON{gear}% |
globe |
|
Globe |
%ICON{globe}% |
graduation |
|
graduation |
%ICON{graduation}% |
hand |
|
Pointing hand |
%ICON{hand}% |
heart |
|
heart |
%ICON{heart}% |
help |
|
Help |
%H% , %ICON{help}% |
hourglass |
|
Hour glass (clock) |
%ICON{hourglass}% |
info |
|
Info |
%ICON{info}% |
legal |
|
legal |
%ICON{legal}% |
luggage |
|
luggage |
%ICON{luggage}% |
map |
|
Map |
%ICON{map}% |
mechanics |
|
mechanics |
%ICON{mechanics}% |
megaphone |
|
Megaphone |
%ICON{megaphone}% |
mobile |
|
Mobile |
%ICON{mobile}% |
more |
|
Read more |
%ICON{more}% |
more-small |
|
Read more, 13x13 |
%ICON{more-small}% |
move |
|
Move |
%ICON{move}% |
note |
|
Note |
%ICON{note}% |
parked |
|
Parked |
%ICON{parked}% |
parts |
|
Parts |
%ICON{parts}% |
pencil |
|
Pencil / Refactor / Edit |
%P% , %ICON{pencil}% |
phone |
|
Phone |
%ICON{phone}% |
photo |
|
Photo, 13x10 |
%ICON{photo}% |
presentation |
|
Presentation |
%ICON{presentation}% |
plug |
|
plug |
%ICON{plug}% |
puzzle |
|
Puzzle |
%ICON{puzzle}% |
process |
|
process |
%ICON{process}% |
profile |
|
profile |
%ICON{profile}% |
question |
|
Question |
%ICON{question}% |
quiet |
|
Quiet |
%ICON{quiet}% |
radioactive |
|
radioactive |
%ICON{radioactive}% |
rfc |
|
Request for comments |
%ICON{rfc}% |
sitemap |
|
Site map |
%ICON{sitemap}% |
socket |
|
socket |
%ICON{socket}% |
sitetree |
|
Site tree |
%ICON{sitetree}% |
sort |
|
Sort |
%ICON{sort}% |
stargold |
|
Gold star, favorites |
%ICON{stargold}% |
starred |
|
Red star, highlight |
%S% , %ICON{starred}% |
star-full |
|
star-full |
%ICON{star-full}% |
star-half |
|
star-half |
%ICON{star-half}% |
star-none |
|
star-none |
%ICON{star-none}% |
stop |
|
Stop |
%ICON{stop}% |
support |
|
support |
%ICON{support}% |
switch |
|
switch |
%ICON{switch}% |
target |
|
Target |
%ICON{target}% |
target-blue |
|
Target - blue |
%ICON{target-blue}% |
target-gray |
|
Target - gray |
%ICON{target-gray}% |
target-green |
|
Target - green |
%ICON{target-green}% |
target-orange |
|
Target - orange |
%ICON{target-orange}% |
target-red |
|
Target - red |
%ICON{target-red}% |
thumbs-down |
|
thumbs-down |
%ICON{thumbs-down}% |
thumbs-up |
|
thumbs-up |
%ICON{thumbs-up}% |
tip |
|
Tip, idea |
%T% , %ICON{tip}% |
toolbox |
|
toolbox |
%ICON{toolbox}% |
tooth |
|
tooth |
%ICON{tooth}% |
traffic-light |
|
traffic-light |
%ICON{traffic-light}% |
vcard |
|
vcard |
%ICON{vcard}% |
video |
|
Video, 13x10 |
%ICON{video}% |
warning |
|
Warning, important |
%X% , %ICON{warning}% |
watch |
|
Watch |
%ICON{watch}% |
wip |
|
Work in progress, under construction |
%ICON{wip}% |
wrench |
|
Wrench, tools |
%ICON{wrench}% |
ying-yang |
|
ying-yang |
%ICON{ying-yang}% |
Topic, file, folder icons
Name |
Icon |
Description |
Write... |
viewtopic |
|
View topic |
%ICON{viewtopic}% |
printtopic |
|
Print topic |
%ICON{printtopic}% |
refreshtopic |
|
Refresh topic |
%ICON{refreshtopic}% |
newtopic |
|
New topic |
%ICON{newtopic}% |
edittopic |
|
Edit topic |
%ICON{edittopic}% |
save |
|
Save |
%ICON{save}% |
attachfile |
|
Attach file |
%ICON{attachfile}% |
download |
|
Download |
%ICON{download}% |
trash |
|
Trash |
%ICON{trash}% |
trash-small |
|
Trash small, 11x11 |
%ICON{trash-small}% |
searchtopic |
|
Search topic |
%ICON{searchtopic}% |
search-small |
|
Small search button, 13x13 |
%ICON{search-small}% |
topicbacklinks |
|
Topic back-links |
%ICON{topicbacklinks}% |
topicdiffs |
|
Topic difference |
%ICON{topicdiffs}% |
statistics |
|
Statistics |
%ICON{statistics}% |
index |
|
Index |
%ICON{index}% |
indexlist |
|
Index list |
%ICON{indexlist}% |
cachetopic |
|
Cache topic |
%ICON{cachetopic}% |
folder |
|
Folder |
%ICON{folder}% |
table |
|
Table |
%ICON{table}% |
edittable |
|
Edit table |
%ICON{edittable}% |
uweb-bo |
|
UWEB (Universal Wiki Edit Button), blue, outline |
%ICON{uweb-bo}% |
uweb-bo12 |
|
UWEB, blue, outline, small 12x12 |
%ICON{uweb-bo12}% |
uweb-g |
|
UWEB, green (default) |
%ICON{uweb-g}% |
uweb-gs |
|
UWEB, green, square |
%ICON{uweb-gs}% |
uweb-m12 |
|
UWEB, black, small 12x12 |
%ICON{uweb-m12}% |
uweb-o |
|
UWEB, orange |
%ICON{uweb-o}% |
uweb-o12 |
|
UWEB, orange, small 12x12 |
%ICON{uweb-o12}% |
uweb-oo |
|
UWEB, orange, outline |
%ICON{uweb-oo}% |
uweb-os |
|
UWEB, orange, square |
%ICON{uweb-os}% |
Person, group, access icons
Name |
Icon |
Description |
Write... |
person |
|
Person |
%ICON{person}% |
persons |
|
Persons |
%ICON{persons}% |
group |
|
Group |
%ICON{group}% |
useractive |
|
Active user |
%ICON{useractive}% |
userinactive |
|
Inactive user |
%ICON{userinactive}% |
useradd |
|
Add user |
%ICON{useradd}% |
userdelete |
|
Delete user |
%ICON{userdelete}% |
useredit |
|
Edit user |
%ICON{useredit}% |
building |
|
Building |
%ICON{building}% |
buildings |
|
Buildings |
%ICON{buildings}% |
logout |
|
Log out |
%ICON{logout}% |
key |
|
Key |
%ICON{key}% |
lock |
|
Lock |
%ICON{lock}% |
locktopic |
|
Locked topic |
%ICON{locktopic}% |
locktopicgray |
|
Locked topic, gray |
%ICON{locktopicgray}% |
lockfolder |
|
Locked folder |
%ICON{lockfolder}% |
lockfoldergray |
|
Locked folder, gray |
%ICON{lockfoldergray}% |
Changes, notification icons
Name |
Icon |
Description |
Write... |
changes |
|
Changes |
%ICON{changes}% |
changes-small |
|
Changes (small), 13x13 |
%ICON{changes-small}% |
recentchanges |
|
Recent changes |
%ICON{recentchanges}% |
mail |
|
Mail |
%ICON{mail}% |
notify |
|
Notify |
%ICON{notify}% |
feed |
|
Feed |
%ICON{feed}% |
rss |
|
rss |
%ICON{rss}% |
rss-feed |
|
RSS feed, 36x14 |
%ICON{rss-feed}% |
rss-small |
|
RSS feed |
%ICON{rss-small}% |
xml-feed |
|
XML feed, 36x14 |
%ICON{xml-feed}% |
xml-small |
|
XML feed |
%ICON{xml-small}% |
Status, flag, LED, tag icons
Name |
Icon |
Description |
Write... |
new |
|
NEW, 30x16 |
%N% , <img src="%ICONURL{new}% |
todo |
|
TODO, 37x16 |
%ICON{todo}% |
updated |
|
UPDATED, 55x16 |
%U% , <img src="%ICONURL{updated}% |
done |
|
DONE, 37x16 |
%ICON{done}% |
closed |
|
CLOSED, 48x16 |
%ICON{closed}% |
processing-32-bg |
|
processing-32-bg |
%ICON{processing-32-bg}% |
processing-32 |
|
processing-32 |
%ICON{processing-32}% |
processing-bg |
|
processing-bg |
%ICON{processing-bg}% |
processing |
|
processing |
%ICON{processing}% |
add |
|
add |
%ICON{add}% |
remove |
|
remove |
%ICON{remove}% |
minus |
|
Minus |
%ICON{minus}% |
plus |
|
Plus |
%ICON{plus}% |
choice-cancel |
|
Cancel |
%ICON{choice-cancel}% |
choice-no |
|
No |
%ICON{choice-no}% |
choice-yes |
|
Yes / Done |
%Y% , %ICON{choice-yes}% |
unchecked |
|
Unchecked checkbox |
%ICON{unchecked}% |
checked |
|
Checked checkbox |
%ICON{checked}% |
checked-round |
|
checked-round |
%ICON{checked-round}% |
unchecked-round |
|
unchecked-round |
%ICON{unchecked-round}% |
flag |
|
Flag |
%ICON{flag}% |
flag-gray |
|
Gray flag |
%ICON{flag-gray}% |
flag-gray-small |
|
Small gray flag, 13x13 |
%ICON{flag-gray-small}% |
led-aqua |
|
Aqua led |
%ICON{led-aqua}% |
led-blue |
|
Blue led |
%ICON{led-blue}% |
led-gray |
|
Gray led |
%ICON{led-gray}% |
led-green |
|
Green led |
%ICON{led-green}% |
led-orange |
|
Orange led |
%ICON{led-orange}% |
led-purple |
|
Purple led |
%ICON{led-purple}% |
led-red |
|
Red led |
%ICON{led-red}% |
led-yellow |
|
Yellow led |
%ICON{led-yellow}% |
led-box-aqua |
|
Aqua led |
%ICON{led-box-aqua}% |
led-box-blue |
|
Blue led |
%ICON{led-box-blue}% |
led-box-gray |
|
Gray led |
%ICON{led-box-gray}% |
led-box-green |
|
Green led |
%ICON{led-box-green}% |
led-box-orange |
|
Orange led |
%ICON{led-box-orange}% |
led-box-purple |
|
Purple led |
%ICON{led-box-purple}% |
led-box-red |
|
Red led |
%ICON{led-box-red}% |
led-box-yellow |
|
Yellow led |
%ICON{led-box-yellow}% |
tag |
|
Tag |
%ICON{tag}% |
tag-black |
|
tag-black |
%ICON{tag-black}% |
tag-blue |
|
Blue tag |
%ICON{tag-blue}% |
tag-brown |
|
Brown tag |
%ICON{tag-brown}% |
tag-green |
|
Green tag |
%ICON{tag-green}% |
tag-magenta |
|
Magenta tag |
%ICON{tag-magenta}% |
tag-orange |
|
Orange tag |
%ICON{tag-orange}% |
tag-purple |
|
Purple tag |
%ICON{tag-purple}% |
tag-red |
|
Red tag |
%ICON{tag-red}% |
tag-yellow |
|
Yellow tag |
%ICON{tag-yellow}% |
Navigation icons
Name |
Icon |
Description |
Write... |
home |
|
Home |
%ICON{home}% |
sitemap |
|
Site map |
%ICON{sitemap}% |
sitetree |
|
Site tree |
%ICON{sitetree}% |
topicbacklinks |
|
Topic back-links |
%ICON{topicbacklinks}% |
arrowdot |
|
Meet here (arrows to red dot) |
%ICON{arrowdot}% |
external |
|
External site |
%ICON{external}% |
left |
|
Left |
%ICON{left}% |
right |
|
Right |
%ICON{right}% |
up |
|
Up |
%ICON{up}% |
down |
|
Down |
%ICON{down}% |
arrowbleft |
|
Arrow blue left |
%ICON{arrowbleft}% |
arrowbright |
|
Arrow blue right |
%ICON{arrowbright}% |
arrowright-small |
|
arrowright-small |
%ICON{arrowright-small}% |
arrowbup |
|
Arrow blue up |
%ICON{arrowbup}% |
arrowbdown |
|
Arrow blue down |
%ICON{arrowbdown}% |
arrowleft |
|
Arrow left |
%ICON{arrowleft}% |
arrowright |
|
Arrow right |
%M% , %ICON{arrowright}% |
arrowup |
|
Arrow up |
%ICON{arrowup}% |
arrowdown |
|
Arrow down |
%ICON{arrowdown}% |
go_start |
|
Go to start |
%ICON{go_start}% |
go_fb |
|
Go fast back |
%ICON{go_fb}% |
go_back |
|
Go back |
%ICON{go_back}% |
go_forward |
|
Go forward |
%ICON{go_forward}% |
go_ff |
|
Go fast forward |
%ICON{go_ff}% |
go_end |
|
Go to end |
%ICON{go_end}% |
Interface icons
Name |
Icon |
Description |
Write... |
monospace |
m |
Monospace |
%ICON{monospace}% |
proportional |
p |
Proportional |
%ICON{proportional}% |
tablesortdiamond |
|
Sort table |
%ICON{tablesortdiamond}% |
tablesortdown |
|
Sort table descending |
%ICON{tablesortdown}% |
tablesortup |
|
Sort table ascending |
%ICON{tablesortup}% |
toggleopen |
|
Open toggle, Twisty open toggle |
%ICON{toggleopen}% |
toggleclose |
|
Close toggle, Twisty close toggle |
%ICON{toggleclose}% |
toggleopen-small |
|
Open toggle, Twisty open toggle |
%ICON{toggleopen-small}% |
toggleclose-small |
|
Close toggle, Twisty close toggle |
%ICON{toggleclose-small}% |
toggleopen-mini |
|
Open toggle, Twisty open toggle |
%ICON{toggleopen-mini}% |
toggleclose-mini |
|
Close toggle, Twisty close toggle |
%ICON{toggleclose-mini}% |
toggleopenleft |
|
Open toggle, Twisty open toggle |
%ICON{toggleopenleft}% |
toggleopenleft-small |
|
Open toggle, Twisty open toggle |
%ICON{toggleopenleft-small}% |
togglecloseleft-small |
|
togglecloseleft-small |
%ICON{togglecloseleft-small}% |
web-bg |
|
Web background, used in Web Left Bar Webs List |
%ICON{web-bg}% |
web-bg-small |
|
Web background, 13x13 |
%ICON{web-bg-small}% |
Foswiki icons
Name |
Icon |
Description |
Write... |
addon |
|
Add-on |
%ICON{addon}% |
application |
|
Application |
%ICON{application}% |
code |
|
Code |
%ICON{code}% |
foswiki |
|
Foswiki |
%ICON{foswiki}% |
package |
|
Package |
%ICON{package}% |
plugin |
|
Plugin |
%ICON{plugin}% |
tag |
|
Tag |
%ICON{tag}% |
searchpackage |
|
Search package |
%ICON{searchpackage}% |
searchtag |
|
Search tag |
%ICON{searchtag}% |
skin |
|
Skin |
%ICON{skin}% |
irc |
|
irc |
%ICON{irc}% |
Social and other website icons
Name |
Icon |
Description |
Write... |
amazon |
|
amazon |
%ICON{amazon}% |
aol |
|
aol |
%ICON{aol}% |
app-store |
|
app-store |
%ICON{app-store}% |
apple |
|
apple |
%ICON{apple}% |
bebo |
|
bebo |
%ICON{bebo}% |
behance |
|
behance |
%ICON{behance}% |
bing |
|
bing |
%ICON{bing}% |
bitly |
|
bitly |
%ICON{bitly}% |
blogger |
|
blogger |
%ICON{blogger}% |
button-blue |
|
button-blue |
%ICON{button-blue}% |
button-green |
|
button-green |
%ICON{button-green}% |
button-light-blue |
|
button-light-blue |
%ICON{button-light-blue}% |
button-orange |
|
button-orange |
%ICON{button-orange}% |
button-red |
|
button-red |
%ICON{button-red}% |
button-white |
|
button-white |
%ICON{button-white}% |
button-yellow |
|
button-yellow |
%ICON{button-yellow}% |
delicious |
|
delicious |
%ICON{delicious}% |
design-bump |
|
design-bump |
%ICON{design-bump}% |
designfloat |
|
designfloat |
%ICON{designfloat}% |
deviant-art |
|
deviant-art |
%ICON{deviant-art}% |
digg |
|
digg |
%ICON{digg}% |
drupal |
|
drupal |
%ICON{drupal}% |
ebay |
|
ebay |
%ICON{ebay}% |
email |
|
email |
%ICON{email}% |
facebook |
|
facebook |
%ICON{facebook}% |
feedburner |
|
feedburner |
%ICON{feedburner}% |
flickr |
|
flickr |
%ICON{flickr}% |
friendfeed |
|
friendfeed |
%ICON{friendfeed}% |
friendster |
|
friendster |
%ICON{friendster}% |
github |
|
github |
%ICON{github}% |
google |
|
google |
%ICON{google}% |
google-buzz |
|
google-buzz |
%ICON{google-buzz}% |
google-talk |
|
google-talk |
%ICON{google-talk}% |
gowalla |
|
gowalla |
%ICON{gowalla}% |
icq |
|
icq |
%ICON{icq}% |
lastfm |
|
lastfm |
%ICON{lastfm}% |
linkedin |
|
linkedin |
%ICON{linkedin}% |
meetup |
|
meetup |
%ICON{meetup}% |
metacafe |
|
metacafe |
%ICON{metacafe}% |
microsoft |
|
microsoft |
%ICON{microsoft}% |
mister-wong |
|
mister-wong |
%ICON{mister-wong}% |
mixx |
|
mixx |
%ICON{mixx}% |
mobileme |
|
mobileme |
%ICON{mobileme}% |
msn |
|
msn |
%ICON{msn}% |
myspace |
|
myspace |
%ICON{myspace}% |
netvibes |
|
netvibes |
%ICON{netvibes}% |
newsvine |
|
newsvine |
%ICON{newsvine}% |
paypal |
|
paypal |
%ICON{paypal}% |
picasa |
|
picasa |
%ICON{picasa}% |
podcast |
|
podcast |
%ICON{podcast}% |
posterous |
|
posterous |
%ICON{posterous}% |
qik |
|
qik |
%ICON{qik}% |
reddit |
|
reddit |
%ICON{reddit}% |
retweet |
|
retweet |
%ICON{retweet}% |
sharethis |
|
sharethis |
%ICON{sharethis}% |
skype |
|
skype |
%ICON{skype}% |
slashdot |
|
slashdot |
%ICON{slashdot}% |
slideshare |
|
slideshare |
%ICON{slideshare}% |
squidoo |
|
squidoo |
%ICON{squidoo}% |
star |
|
star |
%ICON{star}% |
stumbleupon |
|
stumbleupon |
%ICON{stumbleupon}% |
technorati |
|
technorati |
%ICON{technorati}% |
tumblr |
|
tumblr |
%ICON{tumblr}% |
twitter |
|
twitter |
%ICON{twitter}% |
viddler |
|
viddler |
%ICON{viddler}% |
vimeo |
|
vimeo |
%ICON{vimeo}% |
virb |
|
virb |
%ICON{virb}% |
wordpress |
|
wordpress |
%ICON{wordpress}% |
wordpress-blue |
|
wordpress-blue |
%ICON{wordpress-blue}% |
xing |
|
xing |
%ICON{xing}% |
yahoo |
|
yahoo |
%ICON{yahoo}% |
yahoo-buzz |
|
yahoo-buzz |
%ICON{yahoo-buzz}% |
yelp |
|
yelp |
%ICON{yelp}% |
youtube |
|
youtube |
%ICON{youtube}% |
Block graphics
Filetype icons
Filetype icons are used by the attachment table and are seldom used in topics. Write
%ICON{pdf}%
to show the
icon.
Name |
Icon |
Description |
Write... |
as |
|
ActionScript |
%ICON{as}% |
air |
|
Adobe Air |
%ICON{air}% |
bat |
|
MS-DOS batch file |
%ICON{bat}% |
bmp |
|
Bitmap |
%ICON{bmp}% |
c |
|
C source code file |
%ICON{c}% |
css |
|
Cascading Style Sheet file |
%ICON{css}% |
dll |
|
Dynamic Linked Library; Microsoft application file |
%ICON{dll}% |
doc |
|
Microsoft Word file |
%ICON{doc}% |
else |
|
Unknown file format |
%ICON{else}% |
eml |
|
Microsoft Outlook e-mail file |
%ICON{eml}% |
exe |
|
Microsoft Executable file |
%ICON{exe}% |
fla |
|
Macromedia Flash Movie |
%ICON{fla}% |
fon |
|
Windows bitmapped font file |
%ICON{fon}% |
gif |
|
GIF |
%ICON{gif}% |
h |
|
Header file |
%ICON{h}% |
hlp |
|
Standard help file |
%ICON{hlp}% |
html |
|
HTML |
%ICON{html}% |
java |
|
Java source code file |
%ICON{java}% |
jpg |
|
JPEG |
%ICON{jpg}% |
js |
|
JavaScript |
%ICON{js}% |
mdb |
|
Microsoft Access database File |
%ICON{mdb}% |
mov |
|
Quicktime movie |
%ICON{mov}% |
mp3 |
|
MP3 |
%ICON{mp3}% |
pdf |
|
PDF |
%ICON{pdf}% |
pl |
|
Perl source code file |
%ICON{pl}% |
png |
|
PNG |
%ICON{png}% |
ppt |
|
PowerPoint |
%ICON{ppt}% |
ps |
|
Postscript |
%ICON{ps}% |
psd |
|
Photoshop document |
%ICON{psd}% |
py |
|
Python source code file |
%ICON{py}% |
ram |
|
RealAudio |
%ICON{ram}% |
reg |
|
Registry file |
%ICON{reg}% |
sh |
|
Unix shell script |
%ICON{sh}% |
sniff |
|
sniff |
%ICON{sniff}% |
svg |
|
svg |
%ICON{svg}% |
swf |
|
SWF (Shockwave Flash) |
%ICON{swf}% |
ttf |
|
True Type font |
%ICON{ttf}% |
txt |
|
Text |
%ICON{txt}% |
vsd |
|
Visio document |
%ICON{vsd}% |
wav |
|
Waveform sound file |
%ICON{wav}% |
wri |
|
Windows Write |
%ICON{wri}% |
xls |
|
Microsoft Excel Spreadsheet |
%ICON{xls}% |
xml |
|
XML |
%ICON{xml}% |
xsl |
|
XSL (XML style sheet) |
%ICON{xsl}% |
zip |
|
Compressed Zip archive |
%ICON{zip}% |
vector |
|
vector |
%ICON{vector}% |
Usage (extended)
There are several other ways to put an image in a topic.
Shorthand notation:
In Users.Site Preferences set a macro for an ICON, for example:
* Set H = %ICON{help}%
Now you can use the icon by writing %H%
For extended use, check out Foswiki:Extensions.SmiliesPlugin that uses a different short hand than %MACROS%
.
Full path:
In any topic, write %PUBURL%/%SYSTEMWEB%/DocumentGraphics/help.png
to show
You are not restricted to use the DocumentGraphics topic -
in a similar way you can show attached images by replacing DocumentGraphics
with the topic name.
To create an image with a link, write:
[[WebHome][%ICON{home}% Home]]
to get: Home
To get rid of the underline under the space, write:
[[WebHome][%ICON{home}%]] [[WebHome][Home]]
to get: Home
To get the full URL of the icon, use
ICONURL:
%ICONURL{"toggleopen"}%
gets you the image path: https://www.the-data-mine.com/pub/System/DocumentGraphics/toggleopen.png
and that will get rendered as:
To display the ICON that is automatically assigned to a given filename pass the full
filename to the
%ICON%
macro:
Write %ICON{"My wiki documentation.pdf"}%
to get
Implementation
Rendering details
Icons are rendered using two different techniques:
- Template based rendering. This is the more modern rendering, added by the Fam Fam Fam Contrib. The template engine is used to expand a skin template
icon:<name_of_icon>
. It is only used when the %ICON% macro is called with the icon name. e.g. %ICON{"pencil"}%
- Brute force HTLM Code generation. This is the original icon rendering. It is used when a template is not found for the icon, or the
%ICON{}%
macro is called with a filename or URL.
Rendering of the "file type" icons in the Topic Attachment table.
The Attachment table calls the
%ICON%
macro using the full filename of the attachment. The
ICON
macro then maps the file suffix to the icon name
using a mapping table:
DocumentGraphics/_filetypes.txt
Each line in the table maps a file type extension to an icon name.
In order for the topic attachment table to display an icon, the attachment filetype suffix must be listed in this mapping file.
Customisation
To create a
full new set of Icon's, you would need to duplicate this topic,
and then create a set of icon files matching these names as attachments to that copy.
This lengthy process is required to support direct URL usages of the iconset
(its common for users to find out a url to an image, and then paste it into the editor - this 'just' works).
Template customization
If you only want to customise a small set of icons, or add some of your own,
the best way to do this is to create an icon skin template containing your customisations,
and then to add that into your skin path.
eg:
Create a Skin Template for your icons
Either
foswiki/templates/icons.mybook.tmpl
on the filesystem, or create a topic called
MybookSkinIconsTemplate
in the System web
(or if the icon modifications are local to a web, the topic can be created in just that web).
%{ replace the book icon }%
%{ the output of %ICONURL{book}% }%
%TMPL:DEF{"iconurl:book"}%http://someother.corp.server/My-book-company-logo.png%TMPL:END%
%TMPL:DEF{"iconalt:book"}%Book%TMPL:END%
%{ the html output by %ICON{book}% }%
%TMPL:DEF{"icon:book"}%<span class="foswikiIcon"><img src="%TMPL:P{"iconurl:book"}%" width="16" height="16" alt="%TMPL:P{"iconalt:book"}%" /></span>%TMPL:END%
%{ add a new fuzzy-bunny icon }%
%{ the output of %ICONURL{fuzzy}% }%
%TMPL:DEF{"iconurl:fuzzy"}%http://someother.server/fuzzy.png%TMPL:END%
%TMPL:DEF{"iconalt:fuzzy"}%Fuzzy Wuzzy%TMPL:END%
%{ the html output by %ICON{fuzzy}% }%
%TMPL:DEF{"icon:fuzzy"}%<span class="foswikiIcon"><img src="%TMPL:P{"iconurl:fuzzy"}%" width="16" height="16" alt="%TMPL:P{"iconalt:fuzzy"}%" /></span>%TMPL:END%
Add mybook
to your SKIN setting
Assuming
Pattern Skin is your skin
* Set SKIN = mybook, pattern
This allows you to create non-image 'ICONS', specify images from other servers, and add Icons in a foswiki Extension.
See
Skins and
Skin Templates for more information about how to create Skins.
Extending file type icons used in the Attachment table.
As described above, file types are rendered in the code, by mapping the file suffix extracted from the filename and mapping it to an ICON in the
_filetypes.txt
file.
Using an existing ICON for a new filetype
- Download _filetypes.txt and save it locally
- Insert a line for the new filetype. e.g. Map
.vim
filetypes to the vimeo icon:
...
vector vector
vim vimeo <<< Inserted line <<<
vsd vsd
...
Add a new ICON for a new filetype
- Attach the new ICON to the Document Graphics topic e.g. java server pages,
jsp.png
- Using the above steps to edit the
_filetypes.txt
, insert a line for the new filetype and icon
jse js
jsp jsp <<< Inserted line <<<
lzh zip
Credits
Most of these icons are from the
FamFamFam Silk icon set,
some are modifications by
Foswiki:Main.SvenDowideit, and a few come from the
Fugue icons set.
The social media icons are from
icondock's Vector social media set.
Related Topics: Skins,
User Documentation Category,
Developer Documentation Category