Icons Plugin
For more information see Plugin Icons page on DokuWiki.org!
Usage
A simple usage:
{{icon>home}}
Some more complex uses:
{{icon>house?24&circle&padding=10px&background=#DDD&color=#CCC}}
{{fa>home|My Home}}
{{fugue>user?24}}
[[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]]
[[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]
Syntax
Basic syntax
{{icon>icon-name&flags|title}}
DokuWiki link syntax
[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]
External link syntax
[[protocol://host/path|{{icon>icon-name&flags|title}}]]
Available icon packs
| Pack | |
|---|---|
icon | default icon pack (see defaultPack option) |
fa | Font Awesome |
glyphicon | Glyphicons |
fugue | Fugue |
oxygen | KDE Oxygen |
Configuration and Settings
The plugin can be configured in the DokuWiki configuration manager available in the admin menu.
| Configuration Option | Default Value | Description |
|---|---|---|
defaultSize | 16 | Default value when size is not specified |
defaultPack | fa | Default icon pack when is not specified |
loadFontAwesome | On | Font Awesome: Allow/Disallow load of CSS |
fontAwesomeURL | (CDN URL) | Font Awesome: CDN or local URL |
Flags
| Flag | Values | Description |
|---|---|---|
size | (see defaultSize option) | Size of icon (in pixel) |
pack | (see defaultPack option) | Icon pack (fa, glyphicon, fugue, oxygen) |
circle | - | Create a circle around the icon |
border | - | Add a border around the icon |
borderColor | - | Set the color border |
padding | - | Apply a padding to the icon (in pixel) |
background | - | Apply a background to the icon (in hex or color name) |
color | - | Apply a color to the icon (in hex or color name) |
class | - | Adds additional CSS classes to the icon (useful for Font Awesome or Glyphicon) |
align | left|center|right | Align icon (left, right or center) |
left | - | Align icon to left |
right | - | Align icon to right |
center | - | Align icon to center |
Examples
Pack
| Glyphicon | |||
|---|---|---|---|
| Font Awesome | |||
| Fugue |  |  |  |
Basic Syntax & Helper
| Font Awesome | Glyphicons | Fugue | Oxygen |
|---|---|---|---|
| |  |
||
{{icon>home?24&pack=fa}} | {{icon>home?24&pack=glyphicon}} | {{icon>home?24&pack=fugue}} | {{icon>places/user-home?22&pack=oxygen}} |
{{fa>home?24}} | {{glyphicon>home?24}} | {{fugue>home?24}} | {{oxygen>places/user-home?22}} |
Size
| 16 | {{fa>home?16}} |
|
|---|---|---|
| 24 | {{fa>home?24}} |
|
| 32 | {{fa>home?32}} |
|
| 64 | {{fa>home?64}} |
|
| 128 | {{fa>home?128}} |
Align
| Param | Result | |
|---|---|---|
| Left | align=left or left |  Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| Right | align=right or right | Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| Center | align=center or center | Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Params
| Params | |
|---|---|
{{fa>home?24&circle&padding=10px&background&#DDD&color=#CCC}} |
|
{{fa>refresh?24&fa-spin}} |
|
{{fa>home?32|My Home}} |
FAQ
How to Install Font Awesome and Glyphicon in a portable Dokuwiki?
First step, downlod Font Awesome package, and create in your DokuWiki installation a directory (eg. assets/font-awesome) and put all files.
The next step in Configuration Manager, set on loadFontAwesome and type url of your local font awesome package in fontAwesomeURL (eg. /dokuwiki/assets/font-awesome/css/font-awesome.min.css).
The alternative is to use my template (template:bootstrap3) with bundled Font Awesome and Glyphicon ;)
Giuseppe Di Terlizzi