Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:plugin:icons [2015/08/28 00:56]
Giuseppe Di Terlizzi [Usage]
wiki:plugin:icons [2020/02/15 21:58] (current)
Giuseppe Di Terlizzi [Pack]
Line 1: Line 1:
 +<jumbotron>
 ====== Icons Plugin ====== ====== Icons Plugin ======
  
 For more information see [[doku>:plugin:icons|Plugin Icons]] page on [[http://dokuwiki.org|DokuWiki.org]]! 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 ===== ===== Usage =====
Line 7: Line 18:
 A simple usage: A simple usage:
  
-  {{icon>house}}+  {{icon>home}}
  
 Some more complex uses: Some more complex uses:
  
-  {{icon>house?24&circle&padding=10px&background&#DDD&color=#CCC}} +  {{icon>home?24&circle&padding=10px&background=#DDD&color=#CCC}} 
-  {{fa>house|My Home}}+  {{fa>home|My Home}}
   {{fugue>user?24}}   {{fugue>user?24}}
   [[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]]   [[: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 ===== ===== Syntax =====
  
-Basic syntax:+=== Basic syntax ===
 <code>{{icon>icon-name&flags|title}}</code> <code>{{icon>icon-name&flags|title}}</code>
-  * **icon** can be one of this+ 
-    //icon//      --- default icon pack +=== DokuWiki link syntax === 
-    //fa//        --- Font Awesome +<code>[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]</code> 
-    //glyphicon// --- Glyphicons + 
-    //fugue//     --- Fugue +=== External link syntax === 
-    //oxygen//    --- KDE Oxygen+<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 ===== ===== Examples =====
  
-=== Pack ===+==== Pack ====
  
-^ Glyphicon    | {{glyphicon>home?24}} | {{glyphicon>user?24}} | {{glyphicon>cog?24}} | +^ Glyphicon    | {{glyphicon>home?24}} | {{glyphicon>user?24}}  | {{glyphicon>cog?24}} | 
-^ Font Awesome | {{fa>home?24}}        | {{fa>user?24}}        | {{fa>cog?24}}        | +^ Font-Awesome | {{fa>home?24}}        | {{fa>user?24}}         | {{fa>cog?24}}        
-^ Fugue        | {{fugue>home?24}}     | {{fugue>user?24}}     | {{fugue>gear?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 ^ Glyphicons ^ Fugue ^ Oxygen ^ 
-| {{fa>home?24|Font Awesome}} | {{glyphicon>home?24|Glyphicons}} | {{fugue>home?24|Fugue}} | {{oxygen>places/user-home?22|KDE Oxygen}} | 
-| ''<nowiki>{{icon>home?24&pack=fa}}</nowiki>'' | ''<nowiki>{{icon>home?24&pack=glyphicon}}</nowiki>'' | ''<nowiki>{{icon>home?24&pack=fugue}}</nowiki>'' | ''<nowiki>{{icon>places/user-home?22&pack=oxygen}}</nowiki>'' | 
-| ''<nowiki>{{fa>home?24}}</nowiki>'' | ''<nowiki>{{glyphicon>home?24}}</nowiki>'' | ''<nowiki>{{fugue>home?24}}</nowiki>'' | ''<nowiki>{{oxygen>places/user-home?22}}</nowiki>'' | 
  
-=== Size ===+==== 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>''  | ^ 16  | {{fa>home?16}}  | ''<nowiki>{{fa>home?16}}</nowiki>''  |
Line 48: Line 146:
 ^ 128 | {{fa>home?128}} | ''<nowiki>{{fa>home?128}}</nowiki>'' | ^ 128 | {{fa>home?128}} | ''<nowiki>{{fa>home?128}}</nowiki>'' |
  
-=== Align ===+==== Align ====
  
 ^ ^ Param ^ Result ^ ^ ^ Param ^ Result ^
Line 61: Line 159:
 | {{fa>refresh?32&fa-spin}} | ''<nowiki>{{fa>refresh?24&fa-spin}}</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>''    | | {{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]].
  
  
Line 71: Line 278:
  
 The alternative is to use my template ([[doku>template:bootstrap3]]) with bundled Font Awesome and Glyphicon ;) The alternative is to use my template ([[doku>template:bootstrap3]]) with bundled Font Awesome and Glyphicon ;)
 +
  
 {{tag>dokuwiki plugin}} {{tag>dokuwiki plugin}}
  • wiki/plugin/icons.1440716169.txt.gz
  • Last modified: 6 years ago
  • by Giuseppe Di Terlizzi