Angular Font Awesome
September 6, 2018 ยท View on GitHub
NOTE: Support for this library has stopped at FontAwesome 4.7. If you are using FontAwesome 5+ use FontAwesome's own Angular library. link
Angular Font Awesome
Simple, easy to use Angular component to manage Font Awesome icons.
Built with Angular QuickStart Lib.
How to install
Install Packages
npm install --save font-awesome angular-font-awesome
Import the module:
//...
import { AngularFontAwesomeModule } from '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"
],
If you're using Angular CLI 6.0.0, add the font-awesome CSS to styles inside the angular.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" />
Usage and options
| Name | Type | Options | Optional |
|---|---|---|---|
| name | String | F-A Icons | No |
| size | String | lg, 2x, 3x, 4x, 5x | Yes |
| fixed | Boolean | true, false | Yes |
| animation | String | spin, pulse | Yes |
| rotate | Number, String | 90, 180, 270, horizontal, vertical | Yes |
| inverse | Boolean | true, false | Yes |
Example Use
<fa name="cog" animation="spin"></fa>
TODO
- Add Stacked Icons support
- Add List Icons support
- Tests
- Demo page