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

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