ngx-font-awesome

Simple, easy to use Angular component to manage Font Awesome icons.

Usage no npm install needed!

<script type="module">
  import ngxFontAwesome from 'https://cdn.skypack.dev/ngx-font-awesome';
</script>

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>