DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:icons

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

plugin Embed icons in DokuWiki

Last updated on
2019-08-27
Provides
Syntax, Action
Repository
Source

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

Examples

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: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 Design 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 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

Build Status

Change Log

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 URL
  • ADD: 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?

plugin/icons.txt · Last modified: 2023-10-31 00:56 by Klap-in

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki