Code Monkey home page Code Monkey logo

angular-fontawesome's Introduction

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/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 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:

    <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.

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

angular-fontawesome's People

Contributors

angular-cli avatar arjenbrandenburgh avatar athisun avatar benjamincharity avatar bhanuhiteshi avatar damienwebdev avatar davidepastore avatar devoto13 avatar ej2 avatar elebitzero avatar loicgasser avatar mcenkar avatar mlwilkerson avatar mrsuttonmann avatar mzellho avatar paustint avatar peterblazejewicz avatar robmadole avatar ronniebarker avatar scttcper avatar siddajmera avatar stephaniepurvis avatar talbs avatar zeevkatz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.