This is an old revision of the document!
Table of Contents
Icons Plugin
Compatible with DokuWiki
"Frusterick Manners", "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 |
fl | Font-Linux |
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 |
loadFontlinux | On | Font-Linux: Allow/Disallow load of CSS |
fontlinuxURL | (CDN URL) | Font-Linux 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!
Additional icon packs?
I modified my local installation of this plugin to support an additional icon pack, e.g. RPG-awesome. Could something like this please be added to the config options in future versions? Thanks!
Could you explain how you did this, please? Thank you very much.
How does this actually will work?
I have installed the bootstrap and the icons extensions. At glyphicons.com there are many icons, with their names. But I dont get them to work. The syntax is icon>icon-name&flags|title
({} wont display). Okay, but where do I find all the icon-names?