Difference between revisions of "Font Awesome"
(Added info and examples for Font Awesome 5)
m (Floating TOC)
|Line 1:||Line 1:|
== Thousands of icons ==
== Thousands of icons ==
Revision as of 19:14, 7 July 2018
- 1 Thousands of icons
- 2 Try it out
- 3 Usage
- 4 Font Awesome 4 Deprecated
- 5 Font Awesome Pro license
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.
The following simple markup will be displayed as an icon:
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
Icons can be used alongside other text in expressions and values.
Welcome home :far fa-grin-hearts:!Welcome home !
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.
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 fa-xs:
:fas fa-clock fa-2x:
:fas fa-clock fa-4x:
If you need an icon to face a different direction, use a rotation.
:fal fa-bicycle fa-rotate-180:
:fal fa-bicycle fa-flip-vertical:
Icons can spin, learn more here.
:fas fa-circle-notch fa-spin:
While Font Awesome provides a handful of sizing options from
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.
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 ] ]
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
[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:
[fa-stack fa-2x| :fas fa-swimmer fa-stack-1x: [color-red|:far fa-ban fa-stack-2x:] ]
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.
webCoRE expressions do not support Icons in a list since it requires the
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.