Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (over 8 years ago)
- Last Synced: 2024-05-23T01:07:15.177Z (8 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)
- fucking-awesome-angular - ng2-fontawesome - A small directive making font awesome even easier to use. (Table of contents / Third Party Components)
- fucking-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