source: trip-planner-front/node_modules/@fortawesome/angular-fontawesome/README.md@ 84d0fbb

Last change on this file since 84d0fbb was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos

  • Property mode set to 100644
File size: 6.6 KB
RevLine 
[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
9Official Angular component for Font Awesome 5
10
11## Installation
12
13Using `ng add`:
14
15```
16# See Compatibility table below to choose a correct version
17$ ng add @fortawesome/angular-fontawesome@<version>
18```
19
20Using [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
28Using [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
49To get up and running using Font Awesome with Angular follow below steps:
50
511. 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
722. 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
883. 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
105Here'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
109You 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
116The following contributors have either helped to start this project, have contributed
117code, are actively maintaining it (including documentation), or in other ways
118being 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
143If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
144
145The 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)
Note: See TracBrowser for help on using the repository browser.