ngx-font-awesome
v1.0.0
Published
Simple, easy to use Angular component to manage Font Awesome icons.
Downloads
546
Maintainers
Keywords
Readme
Ngx Font Awesome
Simple, easy to use Angular component to manage Font Awesome icons.
How to install
Install Packages
npm install ngx-font-awesome font-awesome --save
Import the module:
//...
import { NgxFontAwesomeModule } from 'ngx-font-awesome';
@NgModule({
//...
imports: [
//...
NgxFontAwesomeModule
],
//...
})
export class AppModule { }
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"
],
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" />
Usage and options
*NOTE: Pass boolean values with square brackets []
Name | Type | Options | Optional
--- | --- | --- | ---
name | String
| F-A Icons | No
size | String
| lg, 2x, 3x, 4x, 5x
| Yes
animation | Boolean
| true, false
| Yes
rotate | Number
| 90, 180, 270
| Yes
flip | String
| vertical, horizontal
| Yes
fixed | Boolean
| true, false
| Yes
border | Boolean
| true, false
| Yes
customClass | String
| eg: custom
| Yes
Example Use
<ngx-fa name="cog" [animation]="true" size="lg"></ngx-fa>