wiki:plugin:icons

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 [2016/01/12 11:02] Giuseppe Di Terlizziwiki:plugin:icons [2020/02/15 21:58] (current) – [Pack] Giuseppe Di Terlizzi
Line 1: Line 1:
-[[https://travis-ci.org/LotarProject/dokuwiki-plugin-icons|{{  https://travis-ci.org/LotarProject/dokuwiki-plugin-icons.png?nocache|Build Status}}]] +<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 13: Line 22:
 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>home|My Home}}   {{fa>home|My Home}}
   {{fugue>user?24}}   {{fugue>user?24}}
Line 32: Line 41:
 === Available icon packs === === Available icon packs ===
  
-^ Pack ^^+^ Pack ^^^
 | ''icon''      | default icon pack (see ''defaultPack'' option) | | ''icon''      | default icon pack (see ''defaultPack'' option) |
-| ''fa''        | Font Awesome | +| ''fa''        | Font-Awesome | font icon | 
-| ''glyphicon'' | Glyphicons | +| ''ra''        | RPG-Awesome | font icon 
-| ''fugue''     | Fugue | +| ''glyphicon'' | Glyphicons | font icon | 
-| ''oxygen''    | KDE Oxygen |+| ''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 ===== ===== Configuration and Settings =====
Line 44: Line 71:
  
 ^ Configuration Option ^ Default Value ^ Description ^ ^ Configuration Option ^ Default Value ^ Description ^
-^ ''defaultSize''     | ''16''        | Default value when size is not specified | +^ ''defaultSize''       | ''16''        | Default value when size is not specified | 
-^ ''defaultPack''     | ''fa''        | Default icon pack when is not specified | +^ ''defaultPack''       | ''fa''        | Default icon pack when is not specified | 
-^ ''loadFontAwesome'' | ''On''        | //Font Awesome//: Allow/Disallow load of CSS  +^ ''fugueURL''          (CDN URL)     | //Fugue// CDN or local URL | 
-^ ''fontAwesomeURL''  | (CDN URL)     | //Font Awesome//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 ===== ===== Flags =====
Line 65: Line 100:
 | ''right''      | -             | Align icon to //right// | | ''right''      | -             | Align icon to //right// |
 | ''center''     | -             | Align icon to //center// | | ''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 ^ +==== Basic Syntax Helper ====
-| {{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 ===+^ 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 89: 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 102: 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 112: 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.1452592929.txt.gz
  • Last modified: 8 years ago
  • by Giuseppe Di Terlizzi