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 [Yarn](https://yarnpkg.com)
|
14 | ```
|
15 | $ yarn add @fortawesome/fontawesome-svg-core
|
16 | $ yarn add @fortawesome/free-solid-svg-icons
|
17 | # See Compatibility table below to choose correct version
|
18 | $ yarn add @fortawesome/angular-fontawesome@<version>
|
19 | ```
|
20 |
|
21 | Using [NPM](https://www.npmjs.com/)
|
22 | ```
|
23 | $ npm install @fortawesome/fontawesome-svg-core
|
24 | $ npm install @fortawesome/free-solid-svg-icons
|
25 | # See Compatibility table below to choose correct version
|
26 | $ npm install @fortawesome/angular-fontawesome@<version>
|
27 | ```
|
28 |
|
29 | ### Compatiblity table
|
30 |
|
31 | |@fortawesome/angular-fontawesome|Angular|
|
32 | |-|-|
|
33 | |0.1.x|5.x|
|
34 | |0.2.x|6.x|
|
35 | |0.3.x|6.x && 7.x|
|
36 | |0.4.x, 0.5.x|8.x|
|
37 |
|
38 | ## Usage
|
39 | To get up and running using Font Awesome with Angular follow below steps:
|
40 |
|
41 | 1. Add `FontAwesomeModule` to `imports` in
|
42 | `src/app/app.module.ts`:
|
43 |
|
44 | ```typescript
|
45 | import { BrowserModule } from '@angular/platform-browser';
|
46 | import { NgModule } from '@angular/core';
|
47 |
|
48 | import { AppComponent } from './app.component';
|
49 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
50 |
|
51 | @NgModule({
|
52 | imports: [
|
53 | BrowserModule,
|
54 | FontAwesomeModule
|
55 | ],
|
56 | declarations: [AppComponent],
|
57 | bootstrap: [AppComponent]
|
58 | })
|
59 | export class AppModule { }
|
60 | ```
|
61 |
|
62 | 2. Tie the icon to the property in your component
|
63 | `src/app/app.component.ts`:
|
64 |
|
65 | ```typescript
|
66 | import { Component } from '@angular/core';
|
67 | import { faCoffee } from '@fortawesome/free-solid-svg-icons';
|
68 |
|
69 | @Component({
|
70 | selector: 'app-root',
|
71 | templateUrl: './app.component.html'
|
72 | })
|
73 | export class AppComponent {
|
74 | faCoffee = faCoffee;
|
75 | }
|
76 | ```
|
77 |
|
78 | 3. Use the icon in the template
|
79 | `src/app/app.component.html`:
|
80 |
|
81 | ```html
|
82 | <fa-icon [icon]="faCoffee"></fa-icon>
|
83 | ```
|
84 |
|
85 | ## Documentation
|
86 |
|
87 | * [In-depth usage guide](./docs/usage.md)
|
88 | * [Using other styles](./docs/usage/using-other-styles.md)
|
89 | * [Full feature list](./docs/usage/features.md)
|
90 | * [Upgrading instructions](UPGRADING.md)
|
91 |
|
92 | ## Examples
|
93 |
|
94 | ### Stackblitz
|
95 | Here's a [StackBlitz Starter Sample](https://stackblitz.com/edit/angular-font-awesome-starter?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).
|
96 |
|
97 |
|
98 | ### Demo application
|
99 | 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.
|
100 |
|
101 | ## Contributing
|
102 | `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.
|
103 |
|
104 | ## Contributors
|
105 |
|
106 | The following contributors have either helped to start this project, have contributed
|
107 | code, are actively maintaining it (including documentation), or in other ways
|
108 | being awesome contributors to this project. **We'd like to take a moment to recognize them.**
|
109 |
|
110 | [<img src="https://github.com/devoto13.png?size=72" alt="devoto13" width="72">](https://github.com/devoto13)
|
111 | [<img src="https://github.com/zeevkatz.png?size=72" alt="zeevkatz" width="72">](https://github.com/zeevkatz)
|
112 | [<img src="https://github.com/scttcper.png?size=72" alt="scttcper" width="72">](https://github.com/scttcper)
|
113 | [<img src="https://github.com/DavidePastore.png?size=72" alt="DavidePastore" width="72">](https://github.com/DavidePastore)
|
114 | [<img src="https://github.com/donmckenna.png?size=72" alt="donmckenna" width="72">](https://github.com/donmckenna)
|
115 | [<img src="https://github.com/paustint.png?size=72" alt="paustint" width="72">](https://github.com/paustint)
|
116 | [<img src="https://github.com/mzellho.png?size=72" alt="mzellho" width="72">](https://github.com/mzellho)
|
117 | [<img src="https://github.com/elebitzero.png?size=72" alt="elebitzero" width="72">](https://github.com/elebitzero)
|
118 | [<img src="https://github.com/mcenkar.png?size=72" alt="mcenkar" width="72">](https://github.com/mcenkar)
|
119 | [<img src="https://github.com/SiddAjmera.png?size=72" alt="SiddAjmera" width="72">](https://github.com/SiddAjmera)
|
120 | [<img src="https://github.com/stephaniepurvis.png?size=72" alt="stephaniepurvis" width="72">](https://github.com/stephaniepurvis)
|
121 | [<img src="https://github.com/loicgasser.png?size=72" alt="loicgasser" width="72">](https://github.com/loicgasser)
|
122 | [<img src="https://github.com/damienwebdev.png?size=72" alt="damienwebdev" width="72">](https://github.com/damienwebdev)
|
123 | [<img src="https://github.com/ronniebarker.png?size=72" alt="ronniebarker" width="72">](https://github.com/ronniebarker)
|
124 | [<img src="https://github.com/bhanuhiteshi.png?size=72" alt="bhanuhiteshi" width="72">](https://github.com/bhanuhiteshi)
|
125 |
|
126 | If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
|
127 |
|
128 | The Font Awesome team:
|
129 |
|
130 | [<img src="https://github.com/mlwilkerson.png?size=72" alt="mlwilkerson" width="72">](https://github.com/mlwilkerson)
|
131 | [<img src="https://github.com/supercodepoet.png?size=72" alt="supercodepoet" width="72">](https://github.com/supercodepoet)
|
132 | [<img src="https://github.com/robmadole.png?size=72" alt="robmadole" width="72">](https://github.com/robmadole)
|
133 | [<img src="https://github.com/talbs.png?size=72" alt="talbs" width="72">](https://github.com/talbs)
|