Both sides previous revision Previous revision Next revision | Previous revisionLast revisionBoth sides next revision |
wiki:plugin:icons [2016/02/26 14:36] – Giuseppe Di Terlizzi | wiki:plugin:icons [2020/02/15 21:58] – Giuseppe Di Terlizzi |
---|
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}} |
=== 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 ===== |
| |
^ 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> |
| ''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>'' | |
^ 128 | {{fa>home?128}} | ''<nowiki>{{fa>home?128}}</nowiki>'' | | ^ 128 | {{fa>home?128}} | ''<nowiki>{{fa>home?128}}</nowiki>'' | |
| |
=== Align === | ==== Align ==== |
| |
^ ^ Param ^ Result ^ | ^ ^ Param ^ Result ^ |
| {{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> |
| |
| |
| |
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}} |