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 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
%ICONURL{"toggleopen"}% gets you the image path: https://middleforkhome.us/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).
<verbatim class='tml tmplComment'>%{ replace the book icon }%</verbatim>
<verbatim class='tml tmplComment'>%{ the output of %ICONURL{book}%</verbatim> }%
<verbatim class='tml tmplDef'>%TMPL:DEF{"iconurl:book"}%http://someother.corp.server/My-book-company-logo.png%TMPL:END%</verbatim>
<verbatim class='tml tmplDef'>%TMPL:DEF{"iconalt:book"}%Book%TMPL:END%</verbatim>
<verbatim class='tml tmplComment'>%{ the html output by %ICON{book}%</verbatim> }%
<verbatim class='tml tmplDef'>%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%</verbatim>
<verbatim class='tml tmplComment'>%{ add a new fuzzy-bunny icon }%</verbatim>
<verbatim class='tml tmplComment'>%{ the output of %ICONURL{fuzzy}%</verbatim> }%
<verbatim class='tml tmplDef'>%TMPL:DEF{"iconurl:fuzzy"}%http://someother.server/fuzzy.png%TMPL:END%</verbatim>
<verbatim class='tml tmplDef'>%TMPL:DEF{"iconalt:fuzzy"}%Fuzzy Wuzzy%TMPL:END%</verbatim>
<verbatim class='tml tmplComment'>%{ the html output by %ICON{fuzzy}%</verbatim> }%
<verbatim class='tml tmplDef'>%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%</verbatim>
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.
Note that
Document icons 
Topic, 
file, 
folder icons 
Person, 
group, 
access icons 
Changes, 
notification icons 
Status, 
flag, 
LED, 
tag icons 
Navigation icons 
Interface icons 
Foswiki icons 
Social and other website icons 
Block graphics 
Filetype icons 
icon.
%RENDERTABLES%
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.