This package provides Font Awesome as an Angular2Dart component, making it easy
to add icons to your Angular2Dart project. Add
[FontAwesomeIconComponent] to your parent component, and then you can use the
element in your markup:
This Dart package implements all of the Font Awesome effects seen here.
The version number of this package follows the version number of Font Awesome itself. This makes it easy to see which version of Font Awesome is provided by this package and pin your own packages to specific versions of Font Awesome (i.e. a version that adds a specific glyph that your package needs).
Font Awesome icons are implemented in
FontAwesomeIconComponent. It requires
name attribute, which is the name of the icon to render:
The component also supports all of the other Font Awesome effects through the following attributes:
border (bool): Display a border.
flip (String): Flip the icon over its "horizontal" or "vertical" axis.
fw (bool): Render as fixed width element.
inverse (bool): Invert the color scheme.
pull (String): Float to the "left" or "right".
pulse (bool): Animate a rotating icon in 8 discrete steps.
rotate (int): Rotate 90, 180, or 270 degrees.
size (String): Icon size. "lg" is 33% larger than normal, or use "2x", "3x", "4x", or "5x".
spin (bool): Animate the icon spinning continuously.
stack (bool): Indicates that the icon is part of a stack a stack, i.e.
<fa-stack>, and sets the size to either "1x" or "2x".
Font Awesome icons can be used as bullets. Add
FontAwesomeListItemComponent to your directives, then write markup like this:
<fa-ul> <fa-li bullet="flag">Item one</fa-li> <fa-li bullet="spinner">Item two</fa-li> <fa-li bullet="check-square">Item three</fa-li> </fa-ul>
The only new attribute is
bullet, which should contain the name of the icon
to use as the list item's bullet. You may also supply a default bullet that
is used for list items which do not specify a bullet:
<fa-ul bullet='check-square'> <fa-li>Item one</fa-li> <fa-li>Item two</fa-li> <fa-li>Item three</fa-li> </fa-ul>
Font Awesome also lets you stack icons on top of each other. Add
FontAwesomeStackComponent to your directives, then write markup like this:
<fa-stack> <fa name="circle" stack="2x"></fa> <fa name="flag" stack="1x" [inverse]="true"></fa> </fa-stack>
An icon stack consists of two icons inside an
attribute is required in this context and sets the icon's size, either "1x" or
This section is for the developer[s] of this package only.
To upgrade Font Awesome, download and unzip the upstream release. Replace
lib/fonts in this package with the
the upstream release. The modify the
font-awesome.css.min as follows:
sed --in-place "s:url[(]'\.\.:url('packages:g" lib/css/*
Commit the changed files, update the version in pubspec.yaml to match the
upstream Font Awesome version, and publish with
The package's version number follows the upstream Font Awesome version number. The build number (after the plus sign) is increased when the package is modified without updating the upstream.
Add this to your package's pubspec.yaml file:
dependencies: ng_fontawesome: ^4.7.0+8
You can install packages from the command line:
$ pub get
Alternatively, your editor might support
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
|4.7.0+8||Mar 7, 2018|
|4.7.0+7||Mar 2, 2018|
|4.7.0+6||Feb 23, 2018|
|4.7.0+5||Feb 23, 2018|
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.
Support Dart 2 in
The SDK constraint in
pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.
|Dart SDK||>=1.12.0 <2.0.0|