Table of Contents
Icons Plugin
Compatible with DokuWiki
- 2024-02-06 "Kaos" unknown
- 2023-04-04 "Jack Jackrum" yes
- 2022-07-31 "Igor" yes
- 2020-07-29 "Hogfather" yes
Similar to fontawesome, icon, iconify
Installation
Optional external requirements: This plugin requires the following additional components that must be installed separately:
Search and install the plugin using the Extension Manager. 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 | font icon |
ra | RPG-Awesome | font icon |
glyphicon | Glyphicons | font icon |
typcn | Typicons | font icon |
mdi | Material Design 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 Design 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 |
loadFontAwesome | On | Font Awesome: Allow/Disallow load of CSS (disable if you have a Bootstrap3 based template) |
loadTypicons | Off | Typicons: enable font icon |
loadFontlinux | Off | Font-Linux: enable font icon |
loadMaterialDesignIcons | On | Material Icons: enable font icon |
loadRpgAwesome | On | Font-Linux: enable font icon |
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 |
Demo
The demo and examples is available on http://www.lotar.altervista.org/dokuwiki/wiki/plugin/icons.
Development
Change Log
- Update plugin.info.txt by giterlizzi (2024-10-30 10:56)
- Merge pull request #31 from LouisOuellet/master by giterlizzi (2024-10-30 10:55)
- Fixed a PHP WARNING for missing key by LouisOuellet (2024-10-29 20:47)
- Fix PHP Warning: Undefined array key 1 in [WEBROOT]/lib/plugins/icons… by LouisOuellet (2024-01-31 03:33)
- Merge branch 'develop' by giterlizzi (2019-08-27 00:32)
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.
The 2018-02-18 version of plugin include RPG-Awesome icon pack.
— Giuseppe Di Terlizzi 2018-02-18 18:49
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?
Is helper plugin works
I can see a list of icons (but without fugue etc) but can't see a form with syntax below (as at your screenshot). Template is Bootstrap 3. — Antiokh 2024-10-12 17:12
Any chance to switch from “famfamfam” (which is smaller in iconsarchive then in original repo and lacks some flags, like Serbia or EU) to GoSquared Flag Icons or Wikipedia Flag icons? — Antiokh 2025-03-107 2:48