NOT MAINTAINED
This library is no longer maintained and I'd like to ask you to consider using other libraries such as https://github.com/FortAwesome/angular-fontawesome.
Angular5 Fontawesome
Installation
npm install --save font-awesome angular2-fontawesome/* package.json */
"font-awesome": "~4.7.0" # Use any versions
"angular2-fontawesome": "~5.2.0"
Angular CLI
In package.json, insert following lines in the dependencies block:
We can import this library using SystemJS (systemjs.config.js):
// .angular-cli.json
{
"apps": [
// ...
"styles": [
// Add this line
"../../node_modules/font-awesome/css/font-awesome.css"
]
// ..
]
}Usage
// src/app/app.module.ts
// ....
// Add this import statement
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'
// ....
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Angular2FontawesomeModule // Add this line
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Parameters
<!-- Component -->
<fa [name]=string // name of fontawesome icon
[size]=number // [1-5]
[flip]=string // [horizontal|vertical]
[pull]=string // [right|left]
[rotate]=number // [90|180|270]
[border]=boolean // [true|false]
[spin]=boolean // [true|false]
[fw]=boolean // [true|false]
[inverse]=boolean // [true|false]
></fa>
<!-- Directive -->
<i fa [name]=string // name of fontawesome icon
[size]=number // [1-5]
[flip]=string // [horizontal|vertical]
[pull]=string // [right|left]
[rotate]=number // [90|180|270]
[border]=boolean // [true|false]
[spin]=boolean // [true|false]
[fw]=boolean // [true|false]
[inverse]=boolean // [true|false]
></fa>name
<fa [name]="'rocket'"></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket"></i>
</fa>
<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>size
<fa [name]="'rocket'" [size]=1></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-lg"></i>
</fa>
<i fa [name]="'rocket'" [size]=1></i>
<!-- rendered -->
<i fa class="fa fa-rocket fa-lg"></i>flip
<fa [name]="'rocket'" [flip]="'horizontal'"></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-flip-horizontal"></i>
</fa>
<i fa [name]="'rocket'" [flip]="'horizontal'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket fa-flip-horizontal"></i>pull
<fa [name]="'rocket'" [pull]="'right'"></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-pull-right"></i>
</fa>
<i fa [name]="'rocket'" [pull]="'right'"></i>
<!-- rendered -->
<i class="fa fa-rocket fa-pull-right"></i>rotate
<fa [name]="'rocket'" [rotate]=90></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-rotate-90"></i>
</fa>
<i fa [name]="'rocket'" [rotate]=90></i>
<!-- rendered -->
<i class="fa fa-rocket fa-rotate-90"></i>border
<fa [name]="'rocket'" [border]=true></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-border"></i>
</fa>
<i fa [name]="'rocket'" [border]=true></i>
<!-- rendered -->
<i fa class="fa fa-rocket fa-border"></i>spin
<fa [name]="'rocket'" [span]=true></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-span"></i>
</fa>
<i fa [name]="'rocket'" [span]=true></i>
<!-- rendered -->
<i class="fa fa-rocket fa-span"></i>fw
<fa [name]="'rocket'" [fw]=true></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-fw"></i>
</fa>
<i fa [name]="'rocket'" [fw]=true></i>
<!-- rendered -->
<i class="fa fa-rocket fa-fw"></i>inverse
<fa [name]="'rocket'" [inverse]=true></fa>
<!-- rendered -->
<fa>
<i class="fa fa-rocket fa-inverse"></i>
</fa>
<i fa [name]="'rocket'" [inverse]=true></i>
<!-- rendered -->
<i class="fa fa-rocket fa-inverse"></i>To Develop This Library
npm install typings --globaltypings installnpm link# /example
npm install font-awesome
npm link angular2-fontawesomeNow your change under /src directory will be reflected.
npm unlink
TODO
- Support for
fa-stack - Support for
fa-liandfa-ul - FaStackDirective
- Test codes
- After the Angular2 guideline for test code is published
License
(MIT License) - Copyright (c) 2018 Komei Shimamura