@ui4ngx/fontawesome4

Another Angular way to display FontAwesome (v4 only).

Usage no npm install needed!

<script type="module">
  import ui4ngxFontawesome4 from 'https://cdn.skypack.dev/@ui4ngx/fontawesome4';
</script>

README

NOTE: This library supports FontAwesome version 4 ONLY.
If you are using FontAwesome version 5+, please use @ui4ngx/fontawesome.

@ui4ngx/fontawesome4

npm Version Build Status

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