https://github.com/seiyria/ng2-fontawesome

An easy-to-use directive for font awesome icons.
https://github.com/seiyria/ng2-fontawesome

List: ng2-fontawesome

angular2 font-awesome icons ng2

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/seiyria/ng2-fontawesome
• Owner: seiyria
• License: mit
• Archived: true
• Created: 2016-05-11T20:13:43.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-23T18:35:43.000Z (about 8 years ago)
• Last Synced: 2024-05-23T01:07:15.177Z (4 months ago)
• Topics: angular2, font-awesome, icons, ng2
• Language: JavaScript
• Size: 8.79 KB
• Stars: 21
• Watchers: 4
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng2-fontawesome - An easy-to-use directive for font awesome icons. (Uncategorized / Uncategorized)
• awesome-angular - ng2-fontawesome - A small directive making font awesome even easier to use. (Table of contents / Third Party Components)

README

        
# ng2-fontawesome

An easy-to-use directive for [font awesome](https://github.com/FortAwesome/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:

```html



```

# 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