Difference between revisions of "Font Awesome"

From webCoRE Wiki - Web-enabled Community's own Rule Engine
Jump to: navigation, search
(Created page with "To-Do")
 
m (→‎Thousands of icons)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
To-Do
+
<div style="float: left; clear: both; margin-right: 1em; margin-bottom: 1em;">__TOC__</div>
 +
 
 +
== Thousands of icons ==
 +
 
 +
Use this [https://fontawesome.com/v5.0/icons?d=gallery searchable list] to find over 3000 icons supported by webCoRE. All of the icons for version 5 (Free and Pro) can be used in your pistons.  (Typically in our “piston state”, logs or visible tiles... Note: They do not embed externally such as in SMS or emails)
 +
 
 +
== Try it out ==
 +
 
 +
The instructions and examples below can all be used in the Evaluation Console on any of your pistons. Just type in the icon markup as a Value and press enter to see the rendered icon. It's a quick way to experiment with icons before adding them to a piston.
 +
 
 +
== Usage ==
 +
 
 +
Font Awesome icons can be added to values and expressions throughout your piston, particularly useful for enriching your [[Device Tiles]] and [[Piston State]]. Font Awesome icons will not work in text displayed outside of the dashboard such as in emails, push notifications, and SMS messages.
 +
 
 +
The following simple markup will be displayed as an icon:
 +
 
 +
<blockquote><i class="fas fa-battery-half"></i> <code>:fas fa-battery-half:</code>
 +
</blockquote>
 +
Simply find the name of an icon you want to use and choose the best style
 +
 
 +
* <code>fas</code> Bold, solid icons
 +
** <i class="fas fa-lock fa-lg fa-fw"></i> <i class="fas fa-bolt fa-lg fa-fw"></i> <i class="fas fa-car fa-lg fa-fw"></i>
 +
* <code>far</code> Medium weight solid or outlined icons
 +
** <i class="far fa-lock fa-lg fa-fw"></i> <i class="far fa-bolt fa-lg fa-fw"></i> <i class="far fa-car fa-lg fa-fw"></i>
 +
* <code>fal</code> Light, outlined icons
 +
** <i class="fal fa-lock fa-lg fa-fw"></i> <i class="fal fa-bolt fa-lg fa-fw"></i> <i class="fal fa-car fa-lg fa-fw"></i>
 +
* <code>fab</code> Brand logos
 +
** <i class="fab fa-apple fa-lg fa-fw"></i> <i class="fab fa-android fa-lg fa-fw"></i> <i class="fab fa-windows fa-lg fa-fw"></i>
 +
 
 +
Icons can be used alongside other text in expressions and values.
 +
 
 +
<blockquote><code>Welcome home :far fa-grin-hearts:!</code> Welcome home <i class="far fa-grin-hearts fa-lg"></i>!
 +
</blockquote>
 +
=== Icon modifiers ===
 +
 
 +
You may notice that the icon markup looks very similar to the way icons are used in the [https://fontawesome.com/how-to-use/on-the-web Font Awesome documentation], <code>class=&quot;fas fa-battery-half&quot;</code>. In fact, this webCoRE markup maps to the <code>class</code> attribute so any modifiers in the Font Awesome documentation can be replicated.
 +
 
 +
==== Sizing icons ====
 +
 
 +
The size of Font Awesome icons can be adjusted, [https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons see all sizes here]. All sizes are relative to the surrounding text so the size of a <code>fa-3x</code> icon in the evaluation console may not exactly match the size of a <code>fa-3x</code> icon in a tile.
 +
 
 +
<blockquote><i class="fas fa-clock"></i> <code>:fas fa-clock:</code>
 +
 
 +
<i class="fas fa-clock fa-xs"></i> <code>:fas fa-clock fa-xs:</code>
 +
 
 +
<i class="fas fa-clock fa-2x"></i> <code>:fas fa-clock fa-2x:</code>
 +
 
 +
<i class="fas fa-clock fa-4x"></i> <code>:fas fa-clock fa-4x:</code>
 +
</blockquote>
 +
==== Rotating icons ====
 +
 
 +
If you need an icon to face a different direction, use [https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons a rotation].
 +
 
 +
<blockquote><i class="fal fa-bicycle fa-lg fa-fw"></i> <code>:fal fa-bicycle:</code>
 +
 
 +
<i class="fal fa-bicycle fa-rotate-180 fa-lg fa-fw"></i> <code>:fal fa-bicycle fa-rotate-180:</code>
 +
 
 +
<i class="fal fa-bicycle fa-flip-vertical fa-lg fa-fw"></i> <code>:fal fa-bicycle fa-flip-vertical:</code>
 +
</blockquote>
 +
==== Animating icons ====
 +
 
 +
Icons can spin, [https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons learn more here].
 +
 
 +
<blockquote><i class="fas fa-circle-notch fa-spin fa-lg fa-fw"></i> <code>:fas fa-circle-notch fa-spin:</code>
 +
</blockquote>
 +
==== Power transforms ====
 +
 
 +
While Font Awesome provides a handful of sizing options from <code>fa-xs</code> to <code>fa-10x</code> and rotations like <code>fa-rotate-90</code>, in some cases it is useful to have more granular control over icon size and position.
 +
 
 +
Note that unlike the sizing options, power transforms like this one <i class="fas fa-exclamation" data-fa-transform="grow-20 rotate-10" style="opacity: .5"></i> do not affect the flow of text around icons. The transform is a sort of &quot;after effect&quot; that changes how the icon is displayed. To use power transforms in webCoRE, simply add the transform markup to the icon.
 +
 
 +
<blockquote><i class="fas fa-exclamation" data-fa-transform="grow-20 rotate-10"></i> <code>:fas fa-exclamation data-fa-transform=&quot;grow-20 rotate-10&quot;:</code>
 +
</blockquote>
 +
See the [https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms documentation and examples] to learn more about scaling, positioning, rotating, and flipping with power transforms. Power transforms are also used extensively in the Combining Icons section.
 +
 
 +
=== Combining icons ===
 +
 
 +
Font Awesome provides very powerful tools for mixing icons together, in webCoRE we use a different type of markup for these icon containers. <code>[modifiers|content]</code> format allows you to create a container element around the content with the specified modifiers on that container.
 +
 
 +
Follow the features described below to build complex and dynamic icons like this calendar that could show the day of the month and number of alerts today:
 +
 
 +
<blockquote><span class="fa-layers fa-3x"><i class="fas fa-calendar"></i><span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3">27</span><span class="fa-layers-counter">3</span></span>
 +
<pre>[fa-layers|
 +
    :fas fa-calendar:
 +
    [fa-layers-text fa-inverse data-fa-transform=&quot;shrink-8 down-3&quot;|
 +
        27
 +
    ]
 +
    [fa-layers-counter|
 +
        3
 +
    ]
 +
]
 +
</pre>
 +
</blockquote>
 +
==== Stacked icons ====
 +
 
 +
Combine two icons stacked with center alignment. The order of the icons matters; the first icon specified will be layered behind the second. [https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons Learn more here]
 +
 
 +
<blockquote><i class="fab fa-reddit-alien fa-lg"></i> <code>:fab fa-reddit-alien:</code>
 +
 
 +
<i class="fas fa-certificate fa-lg"></i> <code>:fas fa-certificate:</code>
 +
 
 +
<span class="fa-stack fa-lg"><i class="fas fa-certificate fa-stack-2x"></i><i class="fab fa-reddit-alien fa-inverse fa-stack-1x"></i></span>
 +
<pre>[fa-stack fa-lg|
 +
    :fas fa-certificate fa-stack-2x:
 +
    :fab fa-reddit-alien fa-inverse fa-stack-1x:
 +
]
 +
</pre>
 +
</blockquote>
 +
Combine with webCoRE markup for colors for more distinct icons:
 +
 
 +
<blockquote><i class="fas fa-swimmer fa-lg"></i> <code>:fas fa-swimmer:</code>
 +
 
 +
<i class="far fa-ban fa-lg"></i> <code>:far fa-ban:</code>
 +
 
 +
<span class="fa-stack fa-2x"><i class="fas fa-swimmer fa-stack-1x"></i><i class="far fa-ban fa-stack-2x" style="color: red"></i></span>
 +
<pre>[fa-stack fa-2x|
 +
    :fas fa-swimmer fa-stack-1x:
 +
    [color-red|:far fa-ban fa-stack-2x:]
 +
]
 +
</pre>
 +
</blockquote>
 +
==== Layered icons ====
 +
 
 +
Layering is similar to stacking but with full control over the positioning and number of icons. Font Awesome provides [https://fontawesome.com/how-to-use/on-the-web/styling/layering many good examples].
 +
 
 +
<blockquote><span class="fa-layers fa-3x"><i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i><i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i><i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i><i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-3"></i></span>
 +
<pre>[fa-layers fa-3x|
 +
    :fas fa-play data-fa-transform=&quot;rotate--90 grow-2&quot;:
 +
    :fas fa-sun fa-inverse data-fa-transform=&quot;shrink-10 up-2&quot;:
 +
    :fas fa-moon fa-inverse data-fa-transform=&quot;shrink-11 down-4.2 left-4&quot;:
 +
    :fas fa-star fa-inverse data-fa-transform=&quot;shrink-11 down-4.2 right-3&quot;:
 +
]
 +
</pre>
 +
</blockquote>
 +
==== Badges over icons ====
 +
 
 +
Layered icons also provide a convenient mechanism for showing a counter or badge in the upper right corner of an icon.
 +
 
 +
<blockquote><span class="fa-layers fa-3x"><i class="fas fa-exclamation-triangle"></i><span class="fa-layers-counter">3</span></span>
 +
<pre>[fa-layers fa-3x|
 +
    :fas fa-exclamation-triangle:
 +
    [fa-layers-counter|
 +
        3
 +
    ]
 +
]
 +
</pre>
 +
</blockquote>
 +
Combine with webCoRE background color to change the badge color.
 +
 
 +
<blockquote><span class="fa-layers fa-3x"><i class="far fa-comment"></i><span class="fa-layers-counter" style="background-color: royalblue">15</span></span>
 +
<pre>[fa-layers fa-3x|
 +
    :far fa-comment:
 +
    [fa-layers-counter bg-royalblue|
 +
        15
 +
    ]
 +
]
 +
</pre>
 +
</blockquote>
 +
==== Custom text over icons ====
 +
 
 +
Apply transforms to custom text.
 +
 
 +
Sorry, folks this one does not actually work in webCoRE yet. We're still waiting on a fix for the [https://github.com/FortAwesome/Font-Awesome/issues/13497 bug reported on GitHub] when we first updated to Font Awesome 5. The <code>fa-layers-text</code> does not work with transforms so the text in these sample icons appears far too large in webCoRE. If this affects you, please consider replying to the bug report on GitHub.
 +
 
 +
<blockquote><span class="fa-layers fa-2x"><i class="fas fa-certificate"></i><span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:bold">NEW</span></span>
 +
<pre>[fa-layers fa-2x|
 +
    :fas fa-certificate:
 +
    [fa-layers-text fa-inverse b data-fa-transform=&quot;shrink-11.5 rotate--30&quot;|
 +
        NEW
 +
    ]
 +
]
 +
</pre>
 +
</blockquote>
 +
<blockquote><span class="fa-layers fa-2x"><i class="fas fa-calendar"></i><span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3">12</span></span>
 +
<pre>[fa-layers fa-2x|
 +
    :fas fa-calendar:
 +
    [fa-layers-text fa-inverse data-fa-transform=&quot;shrink-8 down-3&quot;|
 +
        12
 +
    ]
 +
]
 +
</pre>
 +
</blockquote>
 +
 
 +
=== Other supported features ===
 +
 
 +
Please refer to the [https://fontawesome.com/how-to-use/on-the-web Font Awesome documentation] for additional features and examples. Use masking to &quot;cut out&quot; one icon from another, add borders, and use a fixed width for consistent alignment.
 +
 
 +
=== Unsupported features ===
 +
 
 +
webCoRE expressions do not support [https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list Icons in a list] since it requires the <code>ul</code> and <code>li</code> elements, but you can achieve the same visual effect with fixed-width icons on multiple lines.
 +
 
 +
== Font Awesome 4 Deprecated ==
 +
 
 +
Pistons that used icons from the previous version of Font Awesome will continue to work, though the icons may appear slightly different in Font Awesome 5. Please discontinue use of the <code>:fa fa-lock:</code> and shorthand <code>:fa-lock:</code> markup in favor of the Font Awesome 5 styles and icon names.
 +
 
 +
The dashboard uses a shim published by the Font Awesome team that maps v4 icons to v5.
 +
 
 +
== Font Awesome Pro license ==
 +
 
 +
The dashboard and other official webcore.co sites are authorized to use our Font Awesome 5 Pro license. If you choose to run an independent copy of the webCoRE dashboard, only a limited set of Font Awesome icons will be available. Missing icons will be indicated by a placeholder:
 +
 
 +
<i class="far fa-missing-icon fa-lg"></i>
 +
 
 +
When Font Awesome Pro cannot be loaded the dashboard will modify all icons embedded in the UI to work with the free version of Font Awesome 5. Icons specified in pistons are not modified so Font Awesome 5 Pro will not work without a Pro license. If you have purchased a Font Awesome Pro license, simply add your dashboard domain to the whitelist on your license to enable Pro icons – no code changes are required.
 +
 
 +
Font Awesome Pro icons will load when the dashboard is run from localhost.

Latest revision as of 01:12, 15 January 2022

Thousands of icons

Use this searchable list to find over 3000 icons supported by webCoRE. All of the icons for version 5 (Free and Pro) can be used in your pistons. (Typically in our “piston state”, logs or visible tiles... Note: They do not embed externally such as in SMS or emails)

Try it out

The instructions and examples below can all be used in the Evaluation Console on any of your pistons. Just type in the icon markup as a Value and press enter to see the rendered icon. It's a quick way to experiment with icons before adding them to a piston.

Usage

Font Awesome icons can be added to values and expressions throughout your piston, particularly useful for enriching your Device Tiles and Piston State. Font Awesome icons will not work in text displayed outside of the dashboard such as in emails, push notifications, and SMS messages.

The following simple markup will be displayed as an icon:

:fas fa-battery-half:

Simply find the name of an icon you want to use and choose the best style

  • fas Bold, solid icons
  • far Medium weight solid or outlined icons
  • fal Light, outlined icons
  • fab Brand logos

Icons can be used alongside other text in expressions and values.

Welcome home :far fa-grin-hearts:! Welcome home !

Icon modifiers

You may notice that the icon markup looks very similar to the way icons are used in the Font Awesome documentation, class="fas fa-battery-half". In fact, this webCoRE markup maps to the class attribute so any modifiers in the Font Awesome documentation can be replicated.

Sizing icons

The size of Font Awesome icons can be adjusted, see all sizes here. All sizes are relative to the surrounding text so the size of a fa-3x icon in the evaluation console may not exactly match the size of a fa-3x icon in a tile.

:fas fa-clock:

:fas fa-clock fa-xs:

:fas fa-clock fa-2x:

:fas fa-clock fa-4x:

Rotating icons

If you need an icon to face a different direction, use a rotation.

:fal fa-bicycle:

:fal fa-bicycle fa-rotate-180:

:fal fa-bicycle fa-flip-vertical:

Animating icons

Icons can spin, learn more here.

:fas fa-circle-notch fa-spin:

Power transforms

While Font Awesome provides a handful of sizing options from fa-xs to fa-10x and rotations like fa-rotate-90, in some cases it is useful to have more granular control over icon size and position.

Note that unlike the sizing options, power transforms like this one do not affect the flow of text around icons. The transform is a sort of "after effect" that changes how the icon is displayed. To use power transforms in webCoRE, simply add the transform markup to the icon.

:fas fa-exclamation data-fa-transform="grow-20 rotate-10":

See the documentation and examples to learn more about scaling, positioning, rotating, and flipping with power transforms. Power transforms are also used extensively in the Combining Icons section.

Combining icons

Font Awesome provides very powerful tools for mixing icons together, in webCoRE we use a different type of markup for these icon containers. [modifiers|content] format allows you to create a container element around the content with the specified modifiers on that container.

Follow the features described below to build complex and dynamic icons like this calendar that could show the day of the month and number of alerts today:

273 
[fa-layers|
    :fas fa-calendar:
    [fa-layers-text fa-inverse data-fa-transform="shrink-8 down-3"|
        27
    ]
    [fa-layers-counter|
        3
    ]
]

Stacked icons

Combine two icons stacked with center alignment. The order of the icons matters; the first icon specified will be layered behind the second. Learn more here

:fab fa-reddit-alien:

:fas fa-certificate: 

[fa-stack fa-lg|
    :fas fa-certificate fa-stack-2x:
    :fab fa-reddit-alien fa-inverse fa-stack-1x:
]

Combine with webCoRE markup for colors for more distinct icons:

:fas fa-swimmer:

:far fa-ban: 

[fa-stack fa-2x|
    :fas fa-swimmer fa-stack-1x:
    [color-red|:far fa-ban fa-stack-2x:]
]

Layered icons

Layering is similar to stacking but with full control over the positioning and number of icons. Font Awesome provides many good examples. 

[fa-layers fa-3x|
    :fas fa-play data-fa-transform="rotate--90 grow-2":
    :fas fa-sun fa-inverse data-fa-transform="shrink-10 up-2":
    :fas fa-moon fa-inverse data-fa-transform="shrink-11 down-4.2 left-4":
    :fas fa-star fa-inverse data-fa-transform="shrink-11 down-4.2 right-3":
]

Badges over icons

Layered icons also provide a convenient mechanism for showing a counter or badge in the upper right corner of an icon.

3 
[fa-layers fa-3x|
    :fas fa-exclamation-triangle:
    [fa-layers-counter|
        3
    ]
]

Combine with webCoRE background color to change the badge color.

15 
[fa-layers fa-3x|
    :far fa-comment:
    [fa-layers-counter bg-royalblue|
        15
    ]
]

Custom text over icons

Apply transforms to custom text.

Sorry, folks this one does not actually work in webCoRE yet. We're still waiting on a fix for the bug reported on GitHub when we first updated to Font Awesome 5. The fa-layers-text does not work with transforms so the text in these sample icons appears far too large in webCoRE. If this affects you, please consider replying to the bug report on GitHub.

NEW 
[fa-layers fa-2x|
    :fas fa-certificate:
    [fa-layers-text fa-inverse b data-fa-transform="shrink-11.5 rotate--30"|
        NEW
    ]
]
12 
[fa-layers fa-2x|
    :fas fa-calendar:
    [fa-layers-text fa-inverse data-fa-transform="shrink-8 down-3"|
        12
    ]
]

Other supported features

Please refer to the Font Awesome documentation for additional features and examples. Use masking to "cut out" one icon from another, add borders, and use a fixed width for consistent alignment.

Unsupported features

webCoRE expressions do not support Icons in a list since it requires the ul and li elements, but you can achieve the same visual effect with fixed-width icons on multiple lines.

Font Awesome 4 Deprecated

Pistons that used icons from the previous version of Font Awesome will continue to work, though the icons may appear slightly different in Font Awesome 5. Please discontinue use of the :fa fa-lock: and shorthand :fa-lock: markup in favor of the Font Awesome 5 styles and icon names.

The dashboard uses a shim published by the Font Awesome team that maps v4 icons to v5.

Font Awesome Pro license

The dashboard and other official webcore.co sites are authorized to use our Font Awesome 5 Pro license. If you choose to run an independent copy of the webCoRE dashboard, only a limited set of Font Awesome icons will be available. Missing icons will be indicated by a placeholder:

When Font Awesome Pro cannot be loaded the dashboard will modify all icons embedded in the UI to work with the free version of Font Awesome 5. Icons specified in pistons are not modified so Font Awesome 5 Pro will not work without a Pro license. If you have purchased a Font Awesome Pro license, simply add your dashboard domain to the whitelist on your license to enable Pro icons – no code changes are required.

Font Awesome Pro icons will load when the dashboard is run from localhost.

Retrieved from "https://wiki.webcore.co/index.php?title=Font_Awesome&oldid=1930"