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

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:

TODO

• Add unit tests and integration test
• Improve demo page

License

MIT © Tuyen T Tran