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}% |
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}% |
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 WebLeftBarWebsList |
%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}% |
Other Websites Icons
Name |
Icon |
Description |
Write... |
bitly |
|
bitly |
%ICON{bitly}% |
twitter |
|
twitter |
%ICON{twitter}% |
stumbleupon |
|
stumbleupon |
%ICON{stumbleupon}% |
digg |
|
digg |
%ICON{digg}% |
button-yellow |
|
button-yellow |
%ICON{button-yellow}% |
bebo |
|
bebo |
%ICON{bebo}% |
virb |
|
virb |
%ICON{virb}% |
mobileme |
|
mobileme |
%ICON{mobileme}% |
retweet |
|
retweet |
%ICON{retweet}% |
button-red |
|
button-red |
%ICON{button-red}% |
friendster |
|
friendster |
%ICON{friendster}% |
microsoft |
|
microsoft |
%ICON{microsoft}% |
vimeo |
|
vimeo |
%ICON{vimeo}% |
button-white |
|
button-white |
%ICON{button-white}% |
sharethis |
|
sharethis |
%ICON{sharethis}% |
metacafe |
|
metacafe |
%ICON{metacafe}% |
slideshare |
|
slideshare |
%ICON{slideshare}% |
yahoo-buzz |
|
yahoo-buzz |
%ICON{yahoo-buzz}% |
ebay |
|
ebay |
%ICON{ebay}% |
facebook |
|
facebook |
%ICON{facebook}% |
mister-wong |
|
mister-wong |
%ICON{mister-wong}% |
podcast |
|
podcast |
%ICON{podcast}% |
qik |
|
qik |
%ICON{qik}% |
viddler |
|
viddler |
%ICON{viddler}% |
youtube |
|
youtube |
%ICON{youtube}% |
picasa |
|
picasa |
%ICON{picasa}% |
button-green |
|
button-green |
%ICON{button-green}% |
friendfeed |
|
friendfeed |
%ICON{friendfeed}% |
aol |
|
aol |
%ICON{aol}% |
blogger |
|
blogger |
%ICON{blogger}% |
amazon |
|
amazon |
%ICON{amazon}% |
gowalla |
|
gowalla |
%ICON{gowalla}% |
button-blue |
|
button-blue |
%ICON{button-blue}% |
myspace |
|
myspace |
%ICON{myspace}% |
posterous |
|
posterous |
%ICON{posterous}% |
google-buzz |
|
google-buzz |
%ICON{google-buzz}% |
xing |
|
xing |
%ICON{xing}% |
google |
|
google |
%ICON{google}% |
wordpress-blue |
|
wordpress-blue |
%ICON{wordpress-blue}% |
linkedin |
|
linkedin |
%ICON{linkedin}% |
reddit |
|
reddit |
%ICON{reddit}% |
msn |
|
msn |
%ICON{msn}% |
google-talk |
|
google-talk |
%ICON{google-talk}% |
slashdot |
|
slashdot |
%ICON{slashdot}% |
paypal |
|
paypal |
%ICON{paypal}% |
drupal |
|
drupal |
%ICON{drupal}% |
icq |
|
icq |
%ICON{icq}% |
bing |
|
bing |
%ICON{bing}% |
delicious |
|
delicious |
%ICON{delicious}% |
technorati |
|
technorati |
%ICON{technorati}% |
button-light-blue |
|
button-light-blue |
%ICON{button-light-blue}% |
squidoo |
|
squidoo |
%ICON{squidoo}% |
behance |
|
behance |
%ICON{behance}% |
meetup |
|
meetup |
%ICON{meetup}% |
email |
|
email |
%ICON{email}% |
yelp |
|
yelp |
%ICON{yelp}% |
yahoo |
|
yahoo |
%ICON{yahoo}% |
feedburner |
|
feedburner |
%ICON{feedburner}% |
mixx |
|
mixx |
%ICON{mixx}% |
lastfm |
|
lastfm |
%ICON{lastfm}% |
wordpress |
|
wordpress |
%ICON{wordpress}% |
star |
|
star |
%ICON{star}% |
newsvine |
|
newsvine |
%ICON{newsvine}% |
apple |
|
apple |
%ICON{apple}% |
app-store |
|
app-store |
%ICON{app-store}% |
flickr |
|
flickr |
%ICON{flickr}% |
deviant-art |
|
deviant-art |
%ICON{deviant-art}% |
button-orange |
|
button-orange |
%ICON{button-orange}% |
netvibes |
|
netvibes |
%ICON{netvibes}% |
designfloat |
|
designfloat |
%ICON{designfloat}% |
tumblr |
|
tumblr |
%ICON{tumblr}% |
design-bump |
|
design-bump |
%ICON{design-bump}% |
skype |
|
skype |
%ICON{skype}% |
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 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: https://nkwiki.de/foswiki/pub/System/DocumentGraphics/toggleopen.png
and that will get rendered as:
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 iconsset
(its common for users to find out a url to an image, and then paste it into the editor - this 'just' works).
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
IconsMybookSkinTemplate
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.
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