NOTE: This library supports FontAwesome version 4 ONLY.
If you are using FontAwesome version 5+, please use @ui4ngx/fontawesome.
@ui4ngx/fontawesome4
Another Angular way to display FontAwesome (v4 only)
Demo
Check out the demo.
Install
1. Install Packages
npm install font-awesome@^4.7.0
npm install @ui4ngx/fontawesome4
2. Import the module:
If you're using Angular CLI, add to styles
inside the angular.json
(Angular CLI v6.0.0+) or angular-cli.json
(older version of Angular CLI)
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/@ui4ngx/fontawesome4/css/ngx-fontawesome.scss"
],
If you're NOT using the CLI, import the stylesheet to your index.html
file.
This way CSS styles and Web Fonts will be downloaded automatically.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
//...
import { NgxFontAwesomeModule } from '@ui4ngx/fontawesome4';
@NgModule({
//...
imports: [
//...
NgxFontAwesomeModule
],
//...
})
export class AppModule { }
Features
<fa> Component and i[fa]Directive
Attributes
Name | Type | Options | Optional |
---|---|---|---|
name | String |
Icon Name | No |
title | String |
Tooltip to display when hovered | Yes |
alt | String |
Text alternative to support screen reader | Yes |
animation | String |
spin, pulse |
Yes |
cssClass | String |
Additional CSS classes | Yes |
pull | String |
left, right |
Yes |
scale | Number |
2 - 10 |
Yes |
size | String |
lg, sm, xs |
Yes |
stack | Number |
1,2 |
Yes |
rotate | Number |
90, 180, 270 |
Yes |
rotateBy | Number |
Angle in degree, etc 45, 30,...
|
Yes |
flip | String |
horizontal, vertical, both |
Yes |
border | Boolean |
true, false |
Yes |
fixedWidth | Boolean |
true, false |
Yes |
inverse | Boolean |
true, false |
Yes |
Syntax
<fa> Component
<fa name="..."
title="..."
alt="..."
cssClass="..."
pull="left|right"
scale="2|3|4|5|6|7|8|9|10"
size="xs|sm|lg"
stack="1|2"
rotate="90|180|270"
rotateBy="45"
flip="horizontal|vertical|both"
animation="pulse|spin"
border="true"
fixedWidth="true"
inverse="true"></fa>
i[fa] Directive
<i fa name="..."
title="..."
alt="..."
cssClass="..."
pull="left|right"
scale="2|3|4|5|6|7|8|9|10"
size="xs|sm|lg"
stack="1|2"
rotate="90|180|270"
rotateBy="45"
flip="horizontal|vertical|both"
animation="pulse|spin"
border="true"
fixedWidth="true"
inverse="true"></i>
Extras
You can add custom animations by using font-awesome-animation library along with @ui4ngx/fontawesome4 library.
1. Install Packages
npm install font-awesome-animation
2. Import the module:
If you're using Angular CLI, add to styles
inside the angular.json
(Angular CLI v6.0.0+) or angular-cli.json
(older version of Angular CLI)
"styles": [
"node_modules/font-awesome-animation/css/font-awesome-animation.css",
],
_If you're NOT using the CLI, import the stylesheet to your index.html
file.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.3.0/font-awesome-animation.min.css">
Syntax
<fa> Component
<fa name="..."
cssClass="animated faa-* faa-reverse faa-fast faa-slow"></fa>
i[fa] Directive
<i fa name="..."
cssClass="animated faa-* faa-reverse faa-fast faa-slow"></i>
For more details, please check out Extras tab in the demo page.
NPM version explained
NPM Version will be used to identify
the version of Angular (Major Version number) the version of the library (Minor Version number)For example:
Version | Angular Version | Library version |
---|---|---|
5.1.1 |
^5.0.0 |
1.1 Initial commit |
7.x.y |
^7.0.0 |
x.y etc. Major bug fixes or new feature ... |
8.x.y |
^8.0.0 |
x.y etc. Major bug fixes or new feature ... |
9.x.y |
^9.0.0 |
x.y etc. Major bug fixes or new feature ... |
10.x.y |
^10.0.0 |
x.y etc. Major bug fixes or new feature ... |
11.x.y |
^11.0.0 |
x.y etc. Major bug fixes or new feature ... |
12.x.y |
^12.0.0 |
x.y etc. Major bug fixes or new feature ... |
13.x.y |
^13.0.0 |
x.y etc. Upgrade and new feature ... |
TODO
- Add unit tests and integration test
- Improve demo page
License
MIT © Tuyen T Tran