Simple, easy to use Angular 2 & 4 component to manage Font Awesome icons.
Install Packages
npm install --save font-awesome angular-font-awesome
Import the module:
//...
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
If you're using Angular CLI, add the font-awesome CSS to styles
inside the angular-cli.json
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
NOTE: If using SCSS preprocessor just change the css
for scss
If you're not using the CLI, import the stylesheet to your index.html
file
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
To use the component you can choose between these 2 selectors: <ng2-fa></ng2-fa>
, <fa></fa>
, <ng4-fa><ng4-fa>
, or <ng-fa><ng-fa>
.
Name | Type | Options | Optional |
---|---|---|---|
name | String |
F-A Icons | No |
size | String |
lg, 2x, 3x, 4x, 5x |
Yes |
fixed | Boolean |
`true | false` |
animation | String |
`spin | pulse` |
rotate | `Number | String` | `90 |
inverse | Boolean |
`true | false` |
Example Use
<fa name="cog" animation="spin"></fa>
- Create basic demo
- Add
directive
option - Add Stacked Icons support
- Add List Icons support