Need help with angular-fontawesome?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

FortAwesome
1.1K Stars 102 Forks MIT License 160 Commits 21 Opened issues

Description

Official Angular component for Font Awesome 5

Services available

!
?

Need anything else?

Contributors list

Official Javascript Component

angular-fontawesome

npm

Official Angular component for Font Awesome 5

Installation

Using

ng add
:
# See Compatibility table below to choose a correct version
$ ng add @fortawesome/[email protected]

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/[email protected] ```

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/[email protected] ```

Compatibility table

|@fortawesome/angular-fontawesome|Angular|ng-add| |-|-|-| |0.1.x|5.x|not supported| |0.2.x|6.x|not supported| |0.3.x|6.x && 7.x|not supported| |0.4.x, 0.5.x|8.x|not supported| |0.6.x|9.x|supported| |0.7.x|10.x|supported| |0.8.x|11.x|supported|

Usage

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

  1. Add

    FontAwesomeModule
    to
    imports
    in
    src/app/app.module.ts
    :
    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 { }

  2. Tie the icon to the property in your component

    src/app/app.component.ts
    :
    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; }

  3. Use the icon in the template

    src/app/app.component.html
    :
    
    

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.

devoto13 zeevkatz scttcper DavidePastore donmckenna paustint mzellho elebitzero mcenkar SiddAjmera stephaniepurvis loicgasser damienwebdev ronniebarker bhanuhiteshi plinkpaste ej2 peterblazejewicz arjenbrandenburgh athisun madebyjeffrey benjamincharity

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

The Font Awesome team:

mlwilkerson supercodepoet robmadole talbs

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.