From Wikiversity
Jump to navigation Jump to search
How to code icons
with sample icons and sources below.

Coding Icons[edit | edit source]

Adding icons to your pages
You can add icons to pages in many different ways

Method 1
If you want the icon for a typewriter (such as Nuvola apps package wordprocessing.png) then you simply type
[[Image:Nuvola apps package wordprocessing.png|32px]]
and this icon will appear in the middle of your Nuvola apps package wordprocessing.png text and it will be very tiny because you give the size as 32 pixels.

Nuvola apps package wordprocessing.png

Method 2
If you want the icon to appear the right of your text, you can simply write
[[Image:Nuvola apps package wordprocessing.png|right|128px]]

and you will see the icon to the right of your page.

Nuvola apps package wordprocessing.pngMethod 3
Currently, there is no simple way to get the icon to appear on the left and have the text wordwrap around it.

La Typewritter

Method 4
If you want the icon to appear the right of your text inside a border and with a title, you can simply write
[[Image:Nuvola apps package wordprocessing.png|frame|La Typewritter]]

My typewritered

Method 5
For icons which are exactly 128 pixels wide, there is no difference if you specify "thumb" rather than "frame"
[[Image:Nuvola apps package wordprocessing.png|thumb|My typewritered]]

Method 6
For more formatting possibilities, you can put the picture inside frames and place it in a limited number of other locations. Also, you can use other formatting options to center the text under the picture, etc.

Sources for icons[edit | edit source]

Storyboard Artwork Project/Stamps → Here are examples: EmotiBase-point forward worry 000.png EmotiBase-smile down 060.png EmotiBase-smile down 030.png EmotiBase-smile down 000.png EmotiBase-point left 080.png EmotiBase-point left 045.png Victoria 3 RR LE 000.png Victoria 3 RR LE 045.png Victoria 3 RR LE 080.png

commons:Crystal Clear → Here are examples: Crystal Clear app knotify.png Crystal Clear action build.png Crystal Clear app xfmail.png Crystal Clear app camera.png Crystal Clear app mp3.png Crystal Clear app kuser.svg Crystal Clear device cdwriter unmount.png

commons:Nuvola/all → Here are examples: Nuvola apps edu miscellaneous.svg Nuvola apps package wordprocessing.png Nuvola apps kword.svg Nuvola apps kcoloredit.svg Nuvola apps kuser.svg

commons:Category:Tool icons → Here are examples: Gartoon actions options.svg Preferences-system.svg Note.svg Edit-cut.svg Applications-graphics.svg Applications-accessories.svg Isimple system icons app edit.png Edit-find-replace.svg

commons:Nuvola → Here is an example: Gnome-settings-background.svg

commons:Nuvola/apps → Here is an example: Nuvola apps kalarm.png

commons:User:MG/Icones → Here is an example: Nuvola apps iconthemes.png

commons:category:icons → Here are examples: Broom icon.svg Stock-brush.svg Star max-b.svg AROBAZE.png Important-3.svg Panneau travaux.svg

commons:Road signs of Sweden → Here are examples: Sweden road sign A20.svg Sweden road sign B2.svg

commons:Traffic sign → Here is an example: Small-Traffic-Cone-Edited.png

commons:Category:Film icons → Here are examples: Exquisite-xine.png Exquisite-amorok.png

commons:Category:music icons → Here are examples: Renaissance music icon.svg Classical music icon.svg Exquisite-microphone.png Harp2 ganson.svg

commons:Category:sound icons → Here are examples: Crystal Clear app kcmmidi.png Speaker Icon.svg

commons:Category:PD OpenClipart → Here are examples: Books-aj.svg aj ashton 01f.svg Books-aj.svg aj ashton 01.svg Books-aj.svg aj ashton 01g.svg Books-aj.svg aj ashton 01.svg

commons:Category:Books icons → Here are examples: Nuvola apps bookcase.svg

commons:Category:Logic icons → Here are examples: Blue check.svg

commons:Category:E-mail icons → Here are examples: Nuvola apps kmail.png Nuvola apps korn.png

commons:Category:Computer hardware icons → Here are examples: Tablet mouse.svg

commons:Category:Magnifying glass icons → Here are examples: Crystal Clear app help index.svg Vista-kview.png Edit-find.svg

commons:Category:Clocks icons → Here are examples: Exquisite-kalarm.png Crystal Clear app xclock.svg Stock alarm.svg

Misc. → Baby Tux crop mask.png

Category:Icons by subject