Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. <jumbotron> ====== Icons Plugin ====== For more information see [[doku>:plugin:icons|Plugin Icons]] page on [[http://dokuwiki.org|DokuWiki.org]]! \\ \\ <btn type="success" icon="fa fa-download">[[https://github.com/LotarProject/dokuwiki-plugin-icons/zipball/master|Download]]</btn> <btn type="default" icon="fa fa-bug">[[https://github.com/LotarProject/dokuwiki-plugin-icons/issues|Bug tracker]]</btn> <btn type="default" icon="fa fa-paypal">[[https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9LJDLVSNGYSA2|Donate]]</btn> </jumbotron> ===== Installation ===== Install the plugin using the [[doku>plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[doku>plugins|Plugins]] on how to install plugins manually. ===== Usage ===== 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}}]] ===== Syntax ===== === Basic syntax === <code>{{icon>icon-name&flags|title}}</code> === DokuWiki link syntax === <code>[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]</code> === External link syntax === <code>[[protocol://host/path|{{icon>icon-name&flags|title}}]]</code> === 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 | | ==== Popup helper ==== {{ :wiki:plugin:icons-popup.png?200|}} 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 ===== Configuration and Settings ===== The plugin can be configured in the DokuWiki [[doku>plugin:config|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 | <callout type="info" icon="true"> === Note for Flag icon pack === By default uses the flags from [[doku>plugin:translation|Translation plugin]] present in your DokuWiki installation. </callout> ===== 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 | ===== Examples ===== ==== Pack ==== ^ Glyphicon | {{glyphicon>home?24}} | {{glyphicon>user?24}} | {{glyphicon>cog?24}} | ^ Font-Awesome | {{fa>home?24}} | {{fa>user?24}} | {{fa>cog?24}} | ^ Material | {{mdi>home?24}} | {{mdi>person?24}} | {{mdi>settings?24}} | ^ RPG-Awesome | {{ra>tower?24}} | {{ra>skull?24}} | {{ra>cog?24}} | ^ Typicons | {{typcn>home?24}} | {{typcn>user?24}} | {{typcn>cog?24}} | ^ Fugue | {{fugue>home?24}} | {{fugue>user?24}} | {{fugue>gear?24}} | ^ Linux Font | {{fl>slackware?24}} | {{fl>debian?24}} | {{fl>centos?24}} | ==== Basic Syntax & Helper ==== ^ Font-Awesome | {{fa>home?24|Font-Awesome}} | ''<nowiki>{{icon>home?24&pack=fa}}</nowiki>'' | ''<nowiki>{{fa>home?24}}</nowiki>'' | ^ Material | {{mdi>home?24|Material}} | ''<nowiki>{{icon>home?24&pack=mdi}}</nowiki>'' | ''<nowiki>{{mdi>home?24}}</nowiki>'' | ^ RPG-Awesome | {{ra>tower?24|RPG-Awesome}} | ''<nowiki>{{icon>tower?24&pack=ra}}</nowiki>'' | ''<nowiki>{{ra>tower?24}}</nowiki>'' | ^ Glyphicons | {{glyphicon>home?24|Glyphicons}} | ''<nowiki>{{icon>home?24&pack=glyphicon}}</nowiki>'' | ''<nowiki>{{glyphicon>home?24}}</nowiki>'' | ^ Typicons | {{typcn>home?24|Typicons}} | ''<nowiki>{{icon>home?24&pack=typcn}}</nowiki>'' | ''<nowiki>{{typcn>home?24}}</nowiki>'' | ^ Fugue | {{fugue>home?24|Fugue}} | ''<nowiki>{{icon>home?24&pack=fugue}}</nowiki>'' | ''<nowiki>{{fugue>home?24}}</nowiki>'' | ^ Oxygen | {{oxygen>places/user-home?22|KDE Oxygen}} | ''<nowiki>{{icon>places/user-home?22&pack=oxygen}}</nowiki>'' | ''<nowiki>{{oxygen>places/user-home?22}}</nowiki>'' | ^ Breeze | {{breeze>places/user-home?22|KDE Oxygen}} | ''<nowiki>{{icon>places/user-home?22&pack=breeze}}</nowiki>'' | ''<nowiki>{{breeze>places/user-home?22}}</nowiki>'' | ^ Linux Font | {{fl>slackware?24|Linux Font}} | ''<nowiki>{{icon>slackware?22&pack=fl}}</nowiki>'' | ''<nowiki>{{fl>slackware?24}}</nowiki>'' | ==== Size ==== ^ 16 | {{fa>home?16}} | ''<nowiki>{{fa>home?16}}</nowiki>'' | ^ 24 | {{fa>home?24}} | ''<nowiki>{{fa>home?24}}</nowiki>'' | ^ 32 | {{fa>home?32}} | ''<nowiki>{{fa>home?32}}</nowiki>'' | ^ 64 | {{fa>home?64}} | ''<nowiki>{{fa>home?64}}</nowiki>'' | ^ 128 | {{fa>home?128}} | ''<nowiki>{{fa>home?128}}</nowiki>'' | ==== Align ==== ^ ^ Param ^ Result ^ ^ Left | ''align=left'' \\ or ''left'' | {{oxygen>places/user-home?64&left|KDE Oxygen}} 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'' | {{oxygen>places/user-home?64&right|KDE Oxygen}} 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'' | {{oxygen>places/user-home?64¢er|KDE Oxygen}} \\ 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?32&circle&padding=10px&background=#2C72C7&color=white}} | ''<nowiki>{{fa>home?24&circle&padding=10px&background&#DDD&color=#CCC}}</nowiki>'' | | {{fa>refresh?32&fa-spin}} | ''<nowiki>{{fa>refresh?24&fa-spin}}</nowiki>'' | | {{fa>home?32|My Home}} | ''<nowiki>{{fa>home?32|My Home}}</nowiki>'' | ===== Font Awesome Flags Examples ===== (examples from http://fontawesome.io/examples) ==== Larger Icons ==== <row> <col md="4"> {{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 \\ </col> <col md="8"> To increase icon sizes relative to their container, use the ''lg'' (33% increase), ''2x'', ''3x'', ''4x'', or ''5x'' flags. \\ \\ <code> {{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 </code> </col> </row> ==== Fixed Width Icons ==== <row> <col md="4"> <list-group> * {{fa>home?fw}} [[start|Home]] * {{fa>book?fw}} [[start|Library]] * {{fa>pencil?fw}} [[start|Applications]] * {{fa>cog?fw}} [[start|Settings]] </list-group> </col> <col md="8"> 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. \\ \\ <code html5> <list-group> * {{fa>home?fw}} [[Home]] * {{fa>book?fw}} [[Library]] * {{fa>pencil?fw}} [[Applications]] * {{fa>cog?fw}} [[Settings]] </list-group> </code> </col> </row> ==== Bordered & Pulled Icons ==== <row> <col md="4"> {{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. </col> <col md="8"> Use ''border'' and ''pull-right'' or ''pull-left'' for easy pull quotes or article icons. \\ \\ <code html5> {{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. </code> </col> </row> ==== Animated Icons ==== <row> <col md="4"> {{fa>spinner?spin}} \\ {{fa>circle-o-notch?spin}} \\ {{fa>refresh?spin}} \\ {{fa>cog?spin}} \\ {{fa>spinner?pulse}} \\ </col> <col md="8"> 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''. \\ \\ <code html5> {{fa>spinner?spin}} {{fa>circle-o-notch?spin}} {{fa>refresh?spin}} {{fa>cog?spin}} {{fa>spinner?pulse}} </code> </col> </row> ===== Development ===== [[https://travis-ci.org/LotarProject/dokuwiki-plugin-icons|{{ https://travis-ci.org/LotarProject/dokuwiki-plugin-icons.png?nocache|Build Status}}]] === Change Log === {{rss>http://lotar.altervista.org/feed-wrapper.php?feed=https%3A%2F%2Fgithub.com%2FLotarProject%2Fdokuwiki-plugin-icons%2Fcommits%2Fmaster.atom 5 author date 1h }} === Bugs / Feature Requests === Please report bugs or feature requests at the [[https://github.com/LotarProject/dokuwiki-plugin-icons/issues|Bug tracker]]. ===== 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 ([[doku>template:bootstrap3]]) with bundled Font Awesome and Glyphicon ;) {{tag>dokuwiki plugin}} wiki/plugin/icons.txt Last modified: 4 years agoby Giuseppe Di Terlizzi Log In