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: help

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=

note Document icons

Name Icon Description Write...
airplane airplane airplane %ICON{airplane}%
alert alert alert %ICON{alert}%
award award award %ICON{award}%
barcode barcode barcode %ICON{barcode}%
bed bed bed %ICON{bed}%
bomb bomb bomb %ICON{bomb}%
book Book Book %ICON{book}%
blank
Blank box %ICON{blank}%
blank-bg
Blank box, transparent %ICON{blank-bg}%
bubble bubble Speech bubble %ICON{bubble}%
bug bug bug %ICON{bug}%
chart-bar chart-bar chart-bar %ICON{chart-bar}%
chart-pie chart-pie chart-pie %ICON{chart-pie}%
cog cog cog %ICON{cog}%
comments comments comments %ICON{comments}%
connections connections connections %ICON{connections}%
database database database %ICON{database}%
days days Days, Calendar %ICON{days}%
detail detail detail %ICON{detail}%
download download Download %ICON{download}%
fax fax Fax %ICON{fax}%
filter filter Filter %ICON{filter}%
food food food %ICON{food}%
gear gear Gear %ICON{gear}%
globe globe Globe %ICON{globe}%
graduation graduation graduation %ICON{graduation}%
hand hand Pointing hand %ICON{hand}%
heart heart heart %ICON{heart}%
help help Help %H%, %ICON{help}%
hourglass hourglass Hour glass (clock) %ICON{hourglass}%
info info Info %ICON{info}%
legal legal legal %ICON{legal}%
luggage luggage luggage %ICON{luggage}%
map map Map %ICON{map}%
mechanics mechanics mechanics %ICON{mechanics}%
megaphone megaphone Megaphone %ICON{megaphone}%
mobile mobile Mobile %ICON{mobile}%
more more Read more %ICON{more}%
more-small Read more Read more, 13x13 %ICON{more-small}%
move move Move %ICON{move}%
note note Note %ICON{note}%
parked parked Parked %ICON{parked}%
parts parts Parts %ICON{parts}%
pencil pencil Pencil / Refactor / Edit %P%, %ICON{pencil}%
phone phone Phone %ICON{phone}%
photo Photo Photo, 13x10 %ICON{photo}%
presentation presentation Presentation %ICON{presentation}%
plug plug plug %ICON{plug}%
puzzle puzzle Puzzle %ICON{puzzle}%
process process process %ICON{process}%
profile profile profile %ICON{profile}%
question question Question %ICON{question}%
quiet quiet Quiet %ICON{quiet}%
radioactive radioactive radioactive %ICON{radioactive}%
rfc rfc Request for comments %ICON{rfc}%
sitemap sitemap Site map %ICON{sitemap}%
socket socket socket %ICON{socket}%
sitetree sitetree Site tree %ICON{sitetree}%
sort sort Sort %ICON{sort}%
stargold stargold Gold star, favorites %ICON{stargold}%
starred starred Red star, highlight %S%, %ICON{starred}%
star-full star-full star-full %ICON{star-full}%
star-half star-half star-half %ICON{star-half}%
star-none star-none star-none %ICON{star-none}%
stop stop Stop %ICON{stop}%
support support support %ICON{support}%
switch switch switch %ICON{switch}%
target target Target %ICON{target}%
target-blue target-blue Target - blue %ICON{target-blue}%
target-gray target-gray Target - gray %ICON{target-gray}%
target-green target-green Target - green %ICON{target-green}%
target-orange target-orange Target - orange %ICON{target-orange}%
target-red target-red Target - red %ICON{target-red}%
thumbs-down thumbs-down thumbs-down %ICON{thumbs-down}%
thumbs-up thumbs-up thumbs-up %ICON{thumbs-up}%
tip tip Tip, idea %T%, %ICON{tip}%
toolbox toolbox toolbox %ICON{toolbox}%
tooth tooth tooth %ICON{tooth}%
traffic-light traffic-light traffic-light %ICON{traffic-light}%
vcard vcard vcard %ICON{vcard}%
video Video Video, 13x10 %ICON{video}%
warning warning Warning, important %X%, %ICON{warning}%
watch watch Watch %ICON{watch}%
wip wip Work in progress, under construction %ICON{wip}%
wrench wrench Wrench, tools %ICON{wrench}%
ying-yang ying-yang ying-yang %ICON{ying-yang}%

viewtopic Topic, attachfile file, folder folder icons

Name Icon Description Write...
viewtopic viewtopic View topic %ICON{viewtopic}%
printtopic printtopic Print topic %ICON{printtopic}%
refreshtopic refreshtopic Refresh topic %ICON{refreshtopic}%
newtopic newtopic New topic %ICON{newtopic}%
edittopic edittopic Edit topic %ICON{edittopic}%
save save Save %ICON{save}%
attachfile attachfile Attach file %ICON{attachfile}%
download download Download %ICON{download}%
trash trash Trash %ICON{trash}%
trash-small Move to trash Trash small, 11x11 %ICON{trash-small}%
searchtopic searchtopic Search topic %ICON{searchtopic}%
search-small Search Small search button, 13x13 %ICON{search-small}%
topicbacklinks topicbacklinks Topic back-links %ICON{topicbacklinks}%
topicdiffs topicdiffs Topic difference %ICON{topicdiffs}%
statistics statistics Statistics %ICON{statistics}%
index index Index %ICON{index}%
indexlist indexlist Index list %ICON{indexlist}%
cachetopic cachetopic Cache topic %ICON{cachetopic}%
folder folder Folder %ICON{folder}%
table table Table %ICON{table}%
edittable edittable Edit table %ICON{edittable}%
uweb-bo uweb-bo UWEB (Universal Wiki Edit Button), blue, outline %ICON{uweb-bo}%
uweb-bo12 Edit UWEB, blue, outline, small 12x12 %ICON{uweb-bo12}%
uweb-g uweb-g UWEB, green (default) %ICON{uweb-g}%
uweb-gs uweb-gs UWEB, green, square %ICON{uweb-gs}%
uweb-m12 Edit UWEB, black, small 12x12 %ICON{uweb-m12}%
uweb-o uweb-o UWEB, orange %ICON{uweb-o}%
uweb-o12 Edit UWEB, orange, small 12x12 %ICON{uweb-o12}%
uweb-oo uweb-oo UWEB, orange, outline %ICON{uweb-oo}%
uweb-os uweb-os UWEB, orange, square %ICON{uweb-os}%

person Person, group group, lock access icons

Name Icon Description Write...
person person Person %ICON{person}%
persons persons Persons %ICON{persons}%
group group Group %ICON{group}%
useractive useractive Active user %ICON{useractive}%
userinactive userinactive Inactive user %ICON{userinactive}%
useradd useradd Add user %ICON{useradd}%
userdelete userdelete Delete user %ICON{userdelete}%
useredit useredit Edit user %ICON{useredit}%
building building Building %ICON{building}%
buildings buildings Buildings %ICON{buildings}%
logout logout Log out %ICON{logout}%
key key Key %ICON{key}%
lock lock Lock %ICON{lock}%
locktopic locktopic Locked topic %ICON{locktopic}%
locktopicgray locktopicgray Locked topic, gray %ICON{locktopicgray}%
lockfolder lockfolder Locked folder %ICON{lockfolder}%
lockfoldergray lockfoldergray Locked folder, gray %ICON{lockfoldergray}%

changes Changes, notify notification icons

Name Icon Description Write...
changes changes Changes %ICON{changes}%
changes-small Changes Changes (small), 13x13 %ICON{changes-small}%
recentchanges recentchanges Recent changes %ICON{recentchanges}%
mail mail Mail %ICON{mail}%
notify notify Notify %ICON{notify}%
feed feed Feed %ICON{feed}%
rss rss rss %ICON{rss}%
rss-feed RSS feed RSS feed, 36x14 %ICON{rss-feed}%
rss-small rss-small RSS feed %ICON{rss-small}%
xml-feed XML feed XML feed, 36x14 %ICON{xml-feed}%
xml-small xml-small XML feed %ICON{xml-small}%

choice-yes Status, flag flag, led-box-red LED, tag-yellow tag icons

Name Icon Description Write...
new New NEW, 30x16 %N%, <img src="%ICONURL{new}%
todo TODO TODO, 37x16 %ICON{todo}%
updated UPDATED UPDATED, 55x16 %U%, <img src="%ICONURL{updated}%
done Done DONE, 37x16 %ICON{done}%
closed Closed CLOSED, 48x16 %ICON{closed}%
processing-32-bg processing processing-32-bg %ICON{processing-32-bg}%
processing-32 processing processing-32 %ICON{processing-32}%
processing-bg processing-bg processing-bg %ICON{processing-bg}%
processing processing processing %ICON{processing}%
add add add %ICON{add}%
remove remove remove %ICON{remove}%
minus minus Minus %ICON{minus}%
plus plus Plus %ICON{plus}%
choice-cancel choice-cancel Cancel %ICON{choice-cancel}%
choice-no choice-no No %ICON{choice-no}%
choice-yes choice-yes Yes / Done %Y%, %ICON{choice-yes}%
unchecked unchecked Unchecked checkbox %ICON{unchecked}%
checked checked Checked checkbox %ICON{checked}%
checked-round checked-round checked-round %ICON{checked-round}%
unchecked-round unchecked-round unchecked-round %ICON{unchecked-round}%
flag flag Flag %ICON{flag}%
flag-gray flag-gray Gray flag %ICON{flag-gray}%
flag-gray-small Flag Small gray flag, 13x13 %ICON{flag-gray-small}%
led-aqua led-aqua Aqua led %ICON{led-aqua}%
led-blue led-blue Blue led %ICON{led-blue}%
led-gray led-gray Gray led %ICON{led-gray}%
led-green led-green Green led %ICON{led-green}%
led-orange led-orange Orange led %ICON{led-orange}%
led-purple led-purple Purple led %ICON{led-purple}%
led-red led-red Red led %ICON{led-red}%
led-yellow led-yellow Yellow led %ICON{led-yellow}%
led-box-aqua led-box-aqua Aqua led %ICON{led-box-aqua}%
led-box-blue led-box-blue Blue led %ICON{led-box-blue}%
led-box-gray led-box-gray Gray led %ICON{led-box-gray}%
led-box-green led-box-green Green led %ICON{led-box-green}%
led-box-orange led-box-orange Orange led %ICON{led-box-orange}%
led-box-purple led-box-purple Purple led %ICON{led-box-purple}%
led-box-red led-box-red Red led %ICON{led-box-red}%
led-box-yellow led-box-yellow Yellow led %ICON{led-box-yellow}%
tag tag Tag %ICON{tag}%
tag-black tag-black tag-black %ICON{tag-black}%
tag-blue tag-blue Blue tag %ICON{tag-blue}%
tag-brown tag-brown Brown tag %ICON{tag-brown}%
tag-green tag-green Green tag %ICON{tag-green}%
tag-magenta tag-magenta Magenta tag %ICON{tag-magenta}%
tag-orange tag-orange Orange tag %ICON{tag-orange}%
tag-purple tag-purple Purple tag %ICON{tag-purple}%
tag-red tag-red Red tag %ICON{tag-red}%
tag-yellow tag-yellow Yellow tag %ICON{tag-yellow}%

Name Icon Description Write...
home home Home %ICON{home}%
sitemap sitemap Site map %ICON{sitemap}%
sitetree sitetree Site tree %ICON{sitetree}%
topicbacklinks topicbacklinks Topic back-links %ICON{topicbacklinks}%
arrowdot arrowdot Meet here (arrows to red dot) %ICON{arrowdot}%
external external External site %ICON{external}%
left left Left %ICON{left}%
right right Right %ICON{right}%
up up Up %ICON{up}%
down down Down %ICON{down}%
arrowbleft arrowbleft Arrow blue left %ICON{arrowbleft}%
arrowbright arrowbright Arrow blue right %ICON{arrowbright}%
arrowright-small arrowright-small arrowright-small %ICON{arrowright-small}%
arrowbup arrowbup Arrow blue up %ICON{arrowbup}%
arrowbdown arrowbdown Arrow blue down %ICON{arrowbdown}%
arrowleft arrowleft Arrow left %ICON{arrowleft}%
arrowright arrowright Arrow right %M%, %ICON{arrowright}%
arrowup arrowup Arrow up %ICON{arrowup}%
arrowdown arrowdown Arrow down %ICON{arrowdown}%
go_start go_start Go to start %ICON{go_start}%
go_fb go_fb Go fast back %ICON{go_fb}%
go_back go_back Go back %ICON{go_back}%
go_forward go_forward Go forward %ICON{go_forward}%
go_ff go_ff Go fast forward %ICON{go_ff}%
go_end go_end Go to end %ICON{go_end}%

toggleclose Interface icons

Name Icon Description Write...
monospace
m
Monospace %ICON{monospace}%
proportional
p
Proportional %ICON{proportional}%
tablesortdiamond Sort table Sort table %ICON{tablesortdiamond}%
tablesortdown Sort table descending Sort table descending %ICON{tablesortdown}%
tablesortup Sort table ascending Sort table ascending %ICON{tablesortup}%
toggleopen toggleopen Open toggle, Twisty open toggle %ICON{toggleopen}%
toggleclose toggleclose Close toggle, Twisty close toggle %ICON{toggleclose}%
toggleopen-small toggleopen-small Open toggle, Twisty open toggle %ICON{toggleopen-small}%
toggleclose-small toggleclose-small Close toggle, Twisty close toggle %ICON{toggleclose-small}%
toggleopen-mini toggleopen-mini Open toggle, Twisty open toggle %ICON{toggleopen-mini}%
toggleclose-mini toggleclose-mini Close toggle, Twisty close toggle %ICON{toggleclose-mini}%
toggleopenleft toggleopenleft Open toggle, Twisty open toggle %ICON{toggleopenleft}%
toggleopenleft-small toggleopenleft-small Open toggle, Twisty open toggle %ICON{toggleopenleft-small}%
togglecloseleft-small togglecloseleft-small togglecloseleft-small %ICON{togglecloseleft-small}%
web-bg web-bg Web background, used in WebLeftBarWebsList %ICON{web-bg}%
web-bg-small Web Web background, 13x13 %ICON{web-bg-small}%

foswiki Foswiki icons

Name Icon Description Write...
addon addon Add-on %ICON{addon}%
application application Application %ICON{application}%
code code Code %ICON{code}%
foswiki foswiki Foswiki %ICON{foswiki}%
package package Package %ICON{package}%
plugin plugin Plugin %ICON{plugin}%
tag tag Tag %ICON{tag}%
searchpackage searchpackage Search package %ICON{searchpackage}%
searchtag searchtag Search tag %ICON{searchtag}%
skin skin Skin %ICON{skin}%
irc irc irc %ICON{irc}%

twitter Social and other website icons

Name Icon Description Write...
amazon amazon amazon %ICON{amazon}%
aol aol aol %ICON{aol}%
app-store app-store app-store %ICON{app-store}%
apple apple apple %ICON{apple}%
bebo bebo bebo %ICON{bebo}%
behance behance behance %ICON{behance}%
bing bing bing %ICON{bing}%
bitly bitly bitly %ICON{bitly}%
blogger blogger blogger %ICON{blogger}%
button-blue button-blue button-blue %ICON{button-blue}%
button-green button-green button-green %ICON{button-green}%
button-light-blue button-light-blue button-light-blue %ICON{button-light-blue}%
button-orange button-orange button-orange %ICON{button-orange}%
button-red button-red button-red %ICON{button-red}%
button-white button-white button-white %ICON{button-white}%
button-yellow button-yellow button-yellow %ICON{button-yellow}%
delicious delicious delicious %ICON{delicious}%
design-bump design-bump design-bump %ICON{design-bump}%
designfloat designfloat designfloat %ICON{designfloat}%
deviant-art deviant-art deviant-art %ICON{deviant-art}%
digg digg digg %ICON{digg}%
drupal drupal drupal %ICON{drupal}%
ebay ebay ebay %ICON{ebay}%
email email email %ICON{email}%
facebook facebook facebook %ICON{facebook}%
feedburner feedburner feedburner %ICON{feedburner}%
flickr flickr flickr %ICON{flickr}%
friendfeed friendfeed friendfeed %ICON{friendfeed}%
friendster friendster friendster %ICON{friendster}%
github github github %ICON{github}%
google google google %ICON{google}%
google-buzz google-buzz google-buzz %ICON{google-buzz}%
google-talk google-talk google-talk %ICON{google-talk}%
gowalla gowalla gowalla %ICON{gowalla}%
icq icq icq %ICON{icq}%
lastfm lastfm lastfm %ICON{lastfm}%
linkedin linkedin linkedin %ICON{linkedin}%
meetup meetup meetup %ICON{meetup}%
metacafe metacafe metacafe %ICON{metacafe}%
microsoft microsoft microsoft %ICON{microsoft}%
mister-wong mister-wong mister-wong %ICON{mister-wong}%
mixx mixx mixx %ICON{mixx}%
mobileme mobileme mobileme %ICON{mobileme}%
msn msn msn %ICON{msn}%
myspace myspace myspace %ICON{myspace}%
netvibes netvibes netvibes %ICON{netvibes}%
newsvine newsvine newsvine %ICON{newsvine}%
paypal paypal paypal %ICON{paypal}%
picasa picasa picasa %ICON{picasa}%
podcast podcast podcast %ICON{podcast}%
posterous posterous posterous %ICON{posterous}%
qik qik qik %ICON{qik}%
reddit reddit reddit %ICON{reddit}%
retweet retweet retweet %ICON{retweet}%
sharethis sharethis sharethis %ICON{sharethis}%
skype skype skype %ICON{skype}%
slashdot slashdot slashdot %ICON{slashdot}%
slideshare slideshare slideshare %ICON{slideshare}%
squidoo squidoo squidoo %ICON{squidoo}%
star star star %ICON{star}%
stumbleupon stumbleupon stumbleupon %ICON{stumbleupon}%
technorati technorati technorati %ICON{technorati}%
tumblr tumblr tumblr %ICON{tumblr}%
twitter twitter twitter %ICON{twitter}%
viddler viddler viddler %ICON{viddler}%
vimeo vimeo vimeo %ICON{vimeo}%
virb virb virb %ICON{virb}%
wordpress wordpress wordpress %ICON{wordpress}%
wordpress-blue wordpress-blue wordpress-blue %ICON{wordpress-blue}%
xing xing xing %ICON{xing}%
yahoo yahoo yahoo %ICON{yahoo}%
yahoo-buzz yahoo-buzz yahoo-buzz %ICON{yahoo-buzz}%
yelp yelp yelp %ICON{yelp}%
youtube youtube youtube %ICON{youtube}%

line_ur Block graphics

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

gif Filetype icons

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

Name Icon Description Write...
as as ActionScript %ICON{as}%
air air Adobe Air %ICON{air}%
bat bat MS-DOS batch file %ICON{bat}%
bmp bmp Bitmap %ICON{bmp}%
c c C source code file %ICON{c}%
css css Cascading Style Sheet file %ICON{css}%
dll dll Dynamic Linked Library; Microsoft application file %ICON{dll}%
doc doc Microsoft Word file %ICON{doc}%
else else Unknown file format %ICON{else}%
eml eml Microsoft Outlook e-mail file %ICON{eml}%
exe exe Microsoft Executable file %ICON{exe}%
fla fla Macromedia Flash Movie %ICON{fla}%
fon fon Windows bitmapped font file %ICON{fon}%
gif gif GIF %ICON{gif}%
h h Header file %ICON{h}%
hlp hlp Standard help file %ICON{hlp}%
html html HTML %ICON{html}%
java java Java source code file %ICON{java}%
jpg jpg JPEG %ICON{jpg}%
js js JavaScript %ICON{js}%
mdb mdb Microsoft Access database File %ICON{mdb}%
mov mov Quicktime movie %ICON{mov}%
mp3 mp3 MP3 %ICON{mp3}%
pdf pdf PDF %ICON{pdf}%
pl pl Perl source code file %ICON{pl}%
png png PNG %ICON{png}%
ppt ppt PowerPoint %ICON{ppt}%
ps ps Postscript %ICON{ps}%
psd psd Photoshop document %ICON{psd}%
py py Python source code file %ICON{py}%
ram ram RealAudio %ICON{ram}%
reg reg Registry file %ICON{reg}%
sh sh Unix shell script %ICON{sh}%
sniff sniff sniff %ICON{sniff}%
svg svg svg %ICON{svg}%
swf swf SWF (Shockwave Flash) %ICON{swf}%
ttf ttf True Type font %ICON{ttf}%
txt txt Text %ICON{txt}%
vsd vsd Visio document %ICON{vsd}%
wav wav Waveform sound file %ICON{wav}%
wri wri Windows Write %ICON{wri}%
xls xls Microsoft Excel Spreadsheet %ICON{xls}%
xml xml XML %ICON{xml}%
xsl xsl XSL (XML style sheet) %ICON{xsl}%
zip zip Compressed Zip archive %ICON{zip}%
vector vector vector %ICON{vector}%

Usage (extended)

There are several other ways to put an image in a topic.

Shorthand notation:
In 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 help.png

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 Home

To get rid of the underline under the space, write:
[[WebHome][%ICON{home}%]] [[WebHome][Home]] to get: home Home

To get the full URL of the icon, use ICONURL:
%ICONURL{"toggleopen"}% gets you the image path: https://astrowiki.physics.ox.ac.uk/pub/System/DocumentGraphics/toggleopen.png
and that will get rendered as: toggleopen.png

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 My wiki documentation.pdf

Implementation

Rendering details

Icons are rendered using two different techniques:

  1. 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"}%
  2. 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: vimeo
...
vector vector
vim vimeo         <<< Inserted line <<<
vsd vsd
...

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
Topic revision: r1 - 17 Jun 2022, ProjectContributor
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback