Skip to content
An easy-to-use directive for font awesome icons.
JavaScript
Branch: master
Clone or download
Latest commit a8c7aef Aug 23, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
index.js
package.json

README.md

ng2-fontawesome

An easy-to-use directive for font awesome icons.

Install

npm i -s ng2-fontawesome

Usage

First, make sure you have a CSS and font loader set up for webpack, like so:

{
  test: /\.css/,
  loader: 'style!css'
},
{
  test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
  loader: 'file'
},

It is recommended that you globally apply the Font Awesome directive like so:

import { provide, PLATFORM_DIRECTIVES } from '@angular/core';
import { FontAwesomeDirective } from 'ng2-fontawesome';
import { bootstrap } from '@angular/platform-browser-dynamic';

bootstrap(MyAppComponent, [
  provide(PLATFORM_DIRECTIVES, { useValue: FontAwesomeDirective, multi: true })
]);

Doing so will allow you to use the fa directive anyhwere. Supposing you don't want to do that, registering it and including it like normal will work as well.

Here is how you would use it in your templates:

<i fa [icon]="'cog'" [fw]="true"></i>

Options

Name Valid Values
icon Any font awesome icon name
fw true, false
size 'lg', '2x', '3x', '4x', '5x'
spin true, false
pulse true, false
rotate '90', '180', '270'
flip 'vertical', 'horizontal'
extra any other classes you want to attach to this icon
You can’t perform that action at this time.