@fortawesome/angular-fontawesome

			Stars	Issues	Version	Updated	Created	Size
	@fortawesome/angular-fontawesome		1,369	17	0.12.1	3 months ago	5 years ago

angular-fontawesome

Official Angular component for Font Awesome 5+

Installation

If you have FontAwesome Pro subscription, make sure to configure access before following the installation instructions.
Using ng add:

# See Compatibility table below to choose a correct version
$ ng add @fortawesome/angular-fontawesome@<version>

Using Yarn

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ yarn add @fortawesome/angular-fontawesome@<version>

Using NPM

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>

Compatibility table

|@fortawesome/angular-fontawesome|Angular|Font Awesome|ng-add| |-|-|-|-| |0.1.x|5.x|5.x|not supported| |0.2.x|6.x|5.x|not supported| |0.3.x|6.x && 7.x|5.x|not supported| |0.4.x, 0.5.x|8.x|5.x|not supported| |0.6.x|9.x|5.x|supported| |0.7.x|10.x|5.x|supported| |0.8.x|11.x|5.x|supported| |0.9.x|12.x|5.x|supported| |0.10.x|13.x|5.x && 6.x|supported| |0.11.x|14.x|5.x && 6.x|supported| |0.12.x|15.x|5.x && 6.x|supported|

Usage

To get up and running using Font Awesome with Angular follow below steps:

Add FontAwesomeModule to imports in

src/app/app.module.ts:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Tie the icon to the property in your component

src/app/app.component.ts:

```typescript
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}
```

Use the icon in the template

src/app/app.component.html:

```html
<fa-icon [icon]="faCoffee"></fa-icon>
```

Documentation

Examples

Stackblitz

Here's a StackBlitz Starter Sample on how to display Solid, Regular, and Brand icons using the Icon Library.

Demo application

You can find examples in the projects/demo directory. You can follow the docs to run the demo app on your own machine.

Contributing

angular-fontawesome is a product of the community, you can take a look at the developer docs to find about more on how to contribute back to the project.

Contributors

The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.