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	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	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	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	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	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	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 WebLeftBarWebsList	`%ICON{web-bg}%`
web-bg-small		Web background, 13x13	`%ICON{web-bg-small}%`

Foswiki icons

Name	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	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

Name	Description	Write...
line_ld	Line graph left-down	`%ICON{line_ld}%`
line_lr	Line graph left-right	`%ICON{line_lr}%`
line_lrd	Line graph left-right-down	`%ICON{line_lrd}%`
line_rd	Line graph right-down	`%ICON{line_rd}%`
line_ud	Line graph up-down	`%ICON{line_ud}%`
line_udl	Line graph up-down-left	`%ICON{line_udl}%`
line_udlr	Line graph up-down-left-right	`%ICON{line_udlr}%`
line_udr	Line graph up-down-right	`%ICON{line_udr}%`
line_ul	Line graph up-left	`%ICON{line_ul}%`
line_ulr	Line graph up-left-right	`%ICON{line_ulr}%`
line_ur	Line graph up-right	`%ICON{line_ur}%`
line_ur_gray	Line graph up-right, gray	`%ICON{line_ur_gray}%`
dot_ld	Dot graph left-down	`%ICON{dot_ld}%`
dot_lr	Dot graph left-right	`%ICON{dot_lr}%`
dot_lrd	Dot graph left-right-down	`%ICON{dot_lrd}%`
dot_rd	Dot graph right-down	`%ICON{dot_rd}%`
dot_ud	Dot graph up-down	`%ICON{dot_ud}%`
dot_udl	Dot graph up-down-left	`%ICON{dot_udl}%`
dot_udlr	Dot graph up-down-left-right	`%ICON{dot_udlr}%`
dot_udr	Dot graph up-down-right	`%ICON{dot_udr}%`
dot_ul	Dot graph up-left	`%ICON{dot_ul}%`
dot_ulr	Dot graph up-left-right	`%ICON{dot_ulr}%`
dot_ur	Dot graph up-right	`%ICON{dot_ur}%`
empty	Empty transparent 16x16 spacer	`%ICON{empty}%`
parent_gray	Parent arrow	`%ICON{parent_gray}%`

Filetype icons

Filetype icons are used by the attachment table and are seldom used in topics. Write %ICON{pdf}% to show the

icon.

Name	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 Main.SitePreferences 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: http://biostat1478.dhcp.mc.vanderbilt.edu/foswiki/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 FamFamFamContrib. 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 PatternSkin 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 SkinTemplates 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
...

Upload _filetypes.txt and attach it to DocumentGraphics

Add a new ICON for a new filetype

Attach the new ICON to the DocumentGraphics 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, UserDocumentationCategory, DeveloperDocumentationCategory