Difference between revisions of "Font Awesome"
(Added info and examples for Font Awesome 5) |
m (Floating TOC) |
||
| Line 1: | Line 1: | ||
| + | <div style="float: left; clear: both; margin-right: 1em; margin-bottom: 1em;">__TOC__</div> | ||
| + | |||
== Thousands of icons == | == Thousands of icons == | ||
Revision as of 19:14, 7 July 2018
Thousands of icons
Use this searchable list to find over 3000 icons supported by webCoRE. All of the icons, Free and Pro, can be used in your pistons.
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.
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
-
fasBold, solid icons -
farMedium weight solid or outlined icons -
falLight, outlined icons -
fabBrand 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
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.
