Installation
Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.
Usage
A simple usage:
{{icon>home}}
Some more complex uses:
{{icon>home?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 | font icon |
ra | RPG-Awesome | font icon |
glyphicon | Glyphicons | font icon |
typcn | Typicons | font icon |
mdi | Material Icons | font icon |
fl | Font-Linux | font icon |
fugue | Fugue | |
oxygen | KDE Oxygen | |
breeze | KDE Plasma Breeze | |
Popup helper
Icons plugin provide a popup helper to easy add the icons in your page. To open the popup click to DokuWiki icon in the toolbar in edit page.
The popup support this icon packs:
- Font-Awesome
- RPG-Awesome
- Typicons
- Material Icons
- Glyphicons
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 |
fugueURL | (CDN URL) | Fugue CDN or local URL |
oxygenURL | (CDN URL) | KDE Oxygen CDN or local URL |
breezeURL | (CDN URL) | KDE Plasma Breeze CDN or local URL |
silkURL | (CDN URL) | Silk CDN or local URL |
flagURL | (CDN URL) | Flag CDN or local URL |
Note for Flag icon pack
By default uses the flags from Translation plugin present in your DokuWiki installation.
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 |
Font Awesome Flags
| Flag | Values | Description |
|---|---|---|
lg | - | Increase of 33% the size of icon |
2x|3x|4x|5x | - | Increase the size of icon |
border | - | Add border to icon |
spin | - | Add spin animation |
pulse | - | Add pulse animation |
rotate | 90|180|270 | Rotate the icon |
flip | horizontal|vertical | Flip the icon |
pull-left | - | Pull the icon to left |
pull-right | - | Pull the icon to right |
Examples
Pack
| Glyphicon | |||
|---|---|---|---|
| Font-Awesome | |||
| Material | |||
| RPG-Awesome | |||
| Typicons | |||
| Fugue |  |  |  |
| Linux Font |
Basic Syntax & Helper
| Font-Awesome | {{icon>home?24&pack=fa}} | {{fa>home?24}} |
|
|---|---|---|---|
| Material | {{icon>home?24&pack=mdi}} | {{mdi>home?24}} |
|
| RPG-Awesome | {{icon>tower?24&pack=ra}} | {{ra>tower?24}} |
|
| Glyphicons | {{icon>home?24&pack=glyphicon}} | {{glyphicon>home?24}} |
|
| Typicons | {{icon>home?24&pack=typcn}} | {{typcn>home?24}} |
|
| Fugue | | {{icon>home?24&pack=fugue}} | {{fugue>home?24}} |
| Oxygen |  | {{icon>places/user-home?22&pack=oxygen}} | {{oxygen>places/user-home?22}} |
| Breeze |  | {{icon>places/user-home?22&pack=breeze}} | {{breeze>places/user-home?22}} |
| Linux Font | {{icon>slackware?22&pack=fl}} | {{fl>slackware?24}} |
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}} |
Font Awesome Flags Examples
(examples from http://fontawesome.io/examples)
Larger Icons
lg
2x
3x
4x
5x
2x
3x
4x
5x
To increase icon sizes relative to their container, use the
lg (33% increase), 2x, 3x, 4x, or 5x flags.
{{fa>camera-retro?lg}} lg
{{fa>camera-retro?2x}} 2x
{{fa>camera-retro?3x}} 3x
{{fa>camera-retro?4x}} 4x
{{fa>camera-retro?5x}} 5x
Fixed Width Icons
Use
fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
<list-group> * {{fa>home?fw}} [[Home]] * {{fa>book?fw}} [[Library]] * {{fa>pencil?fw}} [[Applications]] * {{fa>cog?fw}} [[Settings]] </list-group>
Bordered & Pulled Icons
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Use
border and pull-right or pull-left for easy pull quotes or article icons.
{{fa>quote-left?3x&border&pull-left}} ...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Animated Icons
Use the
spin flag to get any icon to rotate, and use pulse to have it rotate with 8 steps. Works well with spinner, refresh, and cog.
{{fa>spinner?spin}}
{{fa>circle-o-notch?spin}}
{{fa>refresh?spin}}
{{fa>cog?spin}}
{{fa>spinner?pulse}}
Development
Change Log
- Merge branch 'develop' by giterlizzi (2019/08/27 00:32)
- Replaced "material" icon pack with "mdi" icon pack by giterlizzi (2019/08/27 00:31)
- Updated .travis.yml by giterlizzi (2018/05/23 16:25)
- Updated .travis.yml by giterlizzi (2018/05/23 16:19)
- Merge branch 'master' into develop by giterlizzi (2018/02/28 16:18)
Bugs / Feature Requests
Please report bugs or feature requests at the Bug tracker.
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