Icons Plugin

For more information see Plugin Icons page on DokuWiki.org!



Download Bug tracker Donate

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.

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}}]]

Basic syntax

{{icon>icon-name&flags|title}}
[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]
[[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

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

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.

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
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
Glyphicon
Font-Awesome
Material
RPG-Awesome
Typicons
Fugue
Linux Font
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}}
16 {{fa>home?16}}
24 {{fa>home?24}}
32 {{fa>home?32}}
64 {{fa>home?64}}
128 {{fa>home?128}}
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}}
lg
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
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>
…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.





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}}

Build Status

Change Log

Bugs / Feature Requests

Please report bugs or feature requests at the Bug tracker.

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 ;)

  • wiki/plugin/icons.txt
  • Last modified: 4 years ago
  • by Giuseppe Di Terlizzi