This is an old revision of the document!
Table of Contents
Icons Plugin
Compatible with DokuWiki
"Elenor of Tsort", Weatherwax, Hrun, Detritus
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
Similar to fontawesome, icon
Installation
Optional external requirements: This plugin requires the following additional components that must be installed separately:
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.
Examples/Usage
See the plugin in action here. The sample page shows all the styles available with the plugin.
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}} {{silk>anchor}} {{flag>en}} [[: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 |
typcn | Typicons |
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 (disable if you have a Bootstrap3 based template) |
fontAwesomeURL | (CDN URL) | Font Awesome CDN or local URL |
loadTypicons | On | Typicons: Allow/Disallow load of CSS |
typiconsURL | (CDN URL) | Typicons CDN or local URL |
fugueURL | (CDN URL) | Fugue CDN or local URL |
oxygenURL | (CDN URL) | KDE Oxygen 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 |
Demo
The demo and examples is available on http://www.lotar.altervista.org/dokuwiki/wiki/plugin/icons.
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.
Known Bugs and Issues
ToDo/Wish List
ADD: New configuration option to change the Fugue CDN URLADD: New configuration option to change the Oxygen CDN URL
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 (bootstrap3) with bundled Font Awesome and Glyphicon ;)
Discussion
Icons in headers?
Is it possible to display an icon in a (sub-)header, like
=== {{icon>external-link-square}} ===
? When I try, it only renders the code itself. Thanks!