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
Last revisionBoth sides next revision
wiki:plugin:icons [2016/02/26 14:36] Giuseppe Di Terlizziwiki:plugin:icons [2020/02/15 21:58] Giuseppe Di Terlizzi
Line 22: 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 41: 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 53: 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 (disable if you have a Bootstrap3 based template)  +^ ''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 | 
-^ ''fugueURL''        | (CDN URL)     | //Fugue// CDN or local URL | +^ ''breezeURL''         | (CDN URL)     | //KDE Plasma Breeze// CDN or local URL | 
-^ ''oxygenURL''       | (CDN URL)     | //KDE Oxygen// CDN or local URL | +^ ''silkURL''           | (CDN URL)     | //Silk// CDN or local URL  
-^ ''flagURL''         | (CDN URL)     | //Flag// CDN or local URL |+^ ''flagURL''           | (CDN URL)     | //Flag// CDN or local URL |
  
-<callout type="info"> +<callout type="info" icon="true"> 
-== Note for Flag icon pack ==+=== Note for Flag icon pack ===
 By default uses the flags from [[doku>plugin:translation|Translation plugin]] present in your DokuWiki installation. By default uses the flags from [[doku>plugin:translation|Translation plugin]] present in your DokuWiki installation.
 </callout> </callout>
Line 82: 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     | {{material>home?24}}  | {{material>person?24}} | {{material>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 106: 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 119: 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>
  
  
Line 142: 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.txt
  • Last modified: 4 years ago
  • by Giuseppe Di Terlizzi