[59329aa] | 1 | <a href="https://fontawesome.com">
|
---|
| 2 | <img align="right" width="100" height="100" alt="Official Javascript Component" src="https://img.fortawesome.com/349cfdf6/official-javascript-component.svg">
|
---|
| 3 | </a>
|
---|
| 4 |
|
---|
| 5 | # angular-fontawesome
|
---|
| 6 |
|
---|
| 7 | [![npm](https://img.shields.io/npm/v/@fortawesome/angular-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/angular-fontawesome)
|
---|
| 8 |
|
---|
| 9 | Official Angular component for Font Awesome 5
|
---|
| 10 |
|
---|
| 11 | ## Installation
|
---|
| 12 |
|
---|
| 13 | Using `ng add`:
|
---|
| 14 |
|
---|
| 15 | ```
|
---|
| 16 | # See Compatibility table below to choose a correct version
|
---|
| 17 | $ ng add @fortawesome/angular-fontawesome@<version>
|
---|
| 18 | ```
|
---|
| 19 |
|
---|
| 20 | Using [Yarn](https://yarnpkg.com)
|
---|
| 21 | ```
|
---|
| 22 | $ yarn add @fortawesome/fontawesome-svg-core
|
---|
| 23 | $ yarn add @fortawesome/free-solid-svg-icons
|
---|
| 24 | # See Compatibility table below to choose a correct version
|
---|
| 25 | $ yarn add @fortawesome/angular-fontawesome@<version>
|
---|
| 26 | ```
|
---|
| 27 |
|
---|
| 28 | Using [NPM](https://www.npmjs.com/)
|
---|
| 29 | ```
|
---|
| 30 | $ npm install @fortawesome/fontawesome-svg-core
|
---|
| 31 | $ npm install @fortawesome/free-solid-svg-icons
|
---|
| 32 | # See Compatibility table below to choose a correct version
|
---|
| 33 | $ npm install @fortawesome/angular-fontawesome@<version>
|
---|
| 34 | ```
|
---|
| 35 |
|
---|
| 36 | ### Compatibility table
|
---|
| 37 |
|
---|
| 38 | |@fortawesome/angular-fontawesome|Angular|ng-add|
|
---|
| 39 | |-|-|-|
|
---|
| 40 | |0.1.x|5.x|not supported|
|
---|
| 41 | |0.2.x|6.x|not supported|
|
---|
| 42 | |0.3.x|6.x && 7.x|not supported|
|
---|
| 43 | |0.4.x, 0.5.x|8.x|not supported|
|
---|
| 44 | |0.6.x|9.x|supported|
|
---|
| 45 | |0.7.x|10.x|supported|
|
---|
| 46 | |0.8.x|11.x|supported|
|
---|
| 47 |
|
---|
| 48 | ## Usage
|
---|
| 49 | To get up and running using Font Awesome with Angular follow below steps:
|
---|
| 50 |
|
---|
| 51 | 1. Add `FontAwesomeModule` to `imports` in
|
---|
| 52 | `src/app/app.module.ts`:
|
---|
| 53 |
|
---|
| 54 | ```typescript
|
---|
| 55 | import { BrowserModule } from '@angular/platform-browser';
|
---|
| 56 | import { NgModule } from '@angular/core';
|
---|
| 57 |
|
---|
| 58 | import { AppComponent } from './app.component';
|
---|
| 59 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
---|
| 60 |
|
---|
| 61 | @NgModule({
|
---|
| 62 | imports: [
|
---|
| 63 | BrowserModule,
|
---|
| 64 | FontAwesomeModule
|
---|
| 65 | ],
|
---|
| 66 | declarations: [AppComponent],
|
---|
| 67 | bootstrap: [AppComponent]
|
---|
| 68 | })
|
---|
| 69 | export class AppModule { }
|
---|
| 70 | ```
|
---|
| 71 |
|
---|
| 72 | 2. Tie the icon to the property in your component
|
---|
| 73 | `src/app/app.component.ts`:
|
---|
| 74 |
|
---|
| 75 | ```typescript
|
---|
| 76 | import { Component } from '@angular/core';
|
---|
| 77 | import { faCoffee } from '@fortawesome/free-solid-svg-icons';
|
---|
| 78 |
|
---|
| 79 | @Component({
|
---|
| 80 | selector: 'app-root',
|
---|
| 81 | templateUrl: './app.component.html'
|
---|
| 82 | })
|
---|
| 83 | export class AppComponent {
|
---|
| 84 | faCoffee = faCoffee;
|
---|
| 85 | }
|
---|
| 86 | ```
|
---|
| 87 |
|
---|
| 88 | 3. Use the icon in the template
|
---|
| 89 | `src/app/app.component.html`:
|
---|
| 90 |
|
---|
| 91 | ```html
|
---|
| 92 | <fa-icon [icon]="faCoffee"></fa-icon>
|
---|
| 93 | ```
|
---|
| 94 |
|
---|
| 95 | ## Documentation
|
---|
| 96 |
|
---|
| 97 | * [In-depth usage guide](./docs/usage.md)
|
---|
| 98 | * [Using other styles](./docs/usage/using-other-styles.md)
|
---|
| 99 | * [Full feature list](./docs/usage/features.md)
|
---|
| 100 | * [Upgrading instructions](UPGRADING.md)
|
---|
| 101 |
|
---|
| 102 | ## Examples
|
---|
| 103 |
|
---|
| 104 | ### Stackblitz
|
---|
| 105 | Here's a [StackBlitz Starter Sample](https://stackblitz.com/edit/angular-fontawesome-sample?file=src%2Fapp%2Fapp.module.ts) on how to display Solid, Regular, and Brand icons [using the Icon Library](./docs/usage/icon-library.md#using-the-icon-library).
|
---|
| 106 |
|
---|
| 107 |
|
---|
| 108 | ### Demo application
|
---|
| 109 | You can find examples in the `projects/demo` directory. You can follow [the docs to run the demo app](./DEVELOPER.md#setting-up-the-local-environment) on your own machine.
|
---|
| 110 |
|
---|
| 111 | ## Contributing
|
---|
| 112 | `angular-fontawesome` is a product of the community, you can take a look at the [developer docs](./DEVELOPER.md) to find about more on how to contribute back to the project.
|
---|
| 113 |
|
---|
| 114 | ## Contributors
|
---|
| 115 |
|
---|
| 116 | The following contributors have either helped to start this project, have contributed
|
---|
| 117 | code, are actively maintaining it (including documentation), or in other ways
|
---|
| 118 | being awesome contributors to this project. **We'd like to take a moment to recognize them.**
|
---|
| 119 |
|
---|
| 120 | [<img src="https://github.com/devoto13.png?size=72" alt="devoto13" width="72">](https://github.com/devoto13)
|
---|
| 121 | [<img src="https://github.com/zeevkatz.png?size=72" alt="zeevkatz" width="72">](https://github.com/zeevkatz)
|
---|
| 122 | [<img src="https://github.com/scttcper.png?size=72" alt="scttcper" width="72">](https://github.com/scttcper)
|
---|
| 123 | [<img src="https://github.com/DavidePastore.png?size=72" alt="DavidePastore" width="72">](https://github.com/DavidePastore)
|
---|
| 124 | [<img src="https://github.com/donmckenna.png?size=72" alt="donmckenna" width="72">](https://github.com/donmckenna)
|
---|
| 125 | [<img src="https://github.com/paustint.png?size=72" alt="paustint" width="72">](https://github.com/paustint)
|
---|
| 126 | [<img src="https://github.com/mzellho.png?size=72" alt="mzellho" width="72">](https://github.com/mzellho)
|
---|
| 127 | [<img src="https://github.com/elebitzero.png?size=72" alt="elebitzero" width="72">](https://github.com/elebitzero)
|
---|
| 128 | [<img src="https://github.com/mcenkar.png?size=72" alt="mcenkar" width="72">](https://github.com/mcenkar)
|
---|
| 129 | [<img src="https://github.com/SiddAjmera.png?size=72" alt="SiddAjmera" width="72">](https://github.com/SiddAjmera)
|
---|
| 130 | [<img src="https://github.com/stephaniepurvis.png?size=72" alt="stephaniepurvis" width="72">](https://github.com/stephaniepurvis)
|
---|
| 131 | [<img src="https://github.com/loicgasser.png?size=72" alt="loicgasser" width="72">](https://github.com/loicgasser)
|
---|
| 132 | [<img src="https://github.com/damienwebdev.png?size=72" alt="damienwebdev" width="72">](https://github.com/damienwebdev)
|
---|
| 133 | [<img src="https://github.com/ronniebarker.png?size=72" alt="ronniebarker" width="72">](https://github.com/ronniebarker)
|
---|
| 134 | [<img src="https://github.com/bhanuhiteshi.png?size=72" alt="bhanuhiteshi" width="72">](https://github.com/bhanuhiteshi)
|
---|
| 135 | [<img src="https://github.com/plinkpaste.png?size=72" alt="plinkpaste" width="72">](https://github.com/plinkpaste)
|
---|
| 136 | [<img src="https://github.com/ej2.png?size=72" alt="ej2" width="72">](https://github.com/ej2)
|
---|
| 137 | [<img src="https://github.com/peterblazejewicz.png?size=72" alt="peterblazejewicz" width="72">](https://github.com/peterblazejewicz)
|
---|
| 138 | [<img src="https://github.com/arjenbrandenburgh.png?size=72" alt="arjenbrandenburgh" width="72">](https://github.com/arjenbrandenburgh)
|
---|
| 139 | [<img src="https://github.com/athisun.png?size=72" alt="athisun" width="72">](https://github.com/athisun)
|
---|
| 140 | [<img src="https://github.com/madebyjeffrey.png?size=72" alt="madebyjeffrey" width="72">](https://github.com/madebyjeffrey)
|
---|
| 141 | [<img src="https://github.com/benjamincharity.png?size=72" alt="benjamincharity" width="72">](https://github.com/benjamincharity)
|
---|
| 142 |
|
---|
| 143 | If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
|
---|
| 144 |
|
---|
| 145 | The Font Awesome team:
|
---|
| 146 |
|
---|
| 147 | [<img src="https://github.com/mlwilkerson.png?size=72" alt="mlwilkerson" width="72">](https://github.com/mlwilkerson)
|
---|
| 148 | [<img src="https://github.com/supercodepoet.png?size=72" alt="supercodepoet" width="72">](https://github.com/supercodepoet)
|
---|
| 149 | [<img src="https://github.com/robmadole.png?size=72" alt="robmadole" width="72">](https://github.com/robmadole)
|
---|
| 150 | [<img src="https://github.com/talbs.png?size=72" alt="talbs" width="72">](https://github.com/talbs)
|
---|