Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FortAwesome/angular-fontawesome
Official Angular component for Font Awesome 5+
https://github.com/FortAwesome/angular-fontawesome
List: angular-fontawesome
angular fontawesome icons
Last synced: 28 days ago
JSON representation
Official Angular component for Font Awesome 5+
- Host: GitHub
- URL: https://github.com/FortAwesome/angular-fontawesome
- Owner: FortAwesome
- License: mit
- Created: 2017-12-19T23:22:39.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-09-11T18:14:56.000Z (3 months ago)
- Last Synced: 2024-10-29T10:54:47.088Z (about 1 month ago)
- Topics: angular, fontawesome, icons
- Language: TypeScript
- Homepage: https://fontawesome.com
- Size: 7.86 MB
- Stars: 1,477
- Watchers: 37
- Forks: 149
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular-components - FortAwesome/angular-fontawesome - Official Angular component for Font Awesome 5 (UI Components / Icons)
- awesome-angular - angular-fontawesome - Official Angular component for Font Awesome 5+. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-fontawesome - Official Angular component for Font Awesome 5+. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-fontawesome - Official Angular component for Font Awesome 5+. (Table of contents / Third Party Components)
README
# angular-fontawesome
[](https://www.npmjs.com/package/@fortawesome/angular-fontawesome)
Official Angular component for Font Awesome 5+
## Installation
If you have [FontAwesome Pro](https://fontawesome.com/plans) subscription, make sure to [configure access](https://fontawesome.com/docs/web/setup/packages#_1-configure-access) before following the installation instructions.
Using `ng add`:
```
# See Compatibility table below to choose a correct version
$ ng add @fortawesome/angular-fontawesome@
```
Using [Yarn](https://yarnpkg.com)
```
$ yarn add @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ yarn add @fortawesome/angular-fontawesome@
```
Using [NPM](https://www.npmjs.com/)
```
$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@
```
### Compatibility table
| @fortawesome/angular-fontawesome | Angular | Font Awesome | ng-add |
|----------------------------------|------------|--------------|---------------|
| 0.1.x | 5.x | 5.x | not supported |
| 0.2.x | 6.x | 5.x | not supported |
| 0.3.x | 6.x && 7.x | 5.x | not supported |
| 0.4.x, 0.5.x | 8.x | 5.x | not supported |
| 0.6.x | 9.x | 5.x | supported |
| 0.7.x | 10.x | 5.x | supported |
| 0.8.x | 11.x | 5.x | supported |
| 0.9.x | 12.x | 5.x | supported |
| 0.10.x | 13.x | 5.x && 6.x | supported |
| 0.11.x | 14.x | 5.x && 6.x | supported |
| 0.12.x | 15.x | 5.x && 6.x | supported |
| 0.13.x | 16.x | 5.x && 6.x | supported |
| 0.14.x | 17.x | 5.x && 6.x | supported |
| 0.15.x | 18.x | 5.x && 6.x | supported |
## Usage
To get up and running using Font Awesome with Angular follow the below steps:
1. Add `FontAwesomeModule` to the `imports` and tie the icon to the property in your component
`src/app/app.component.ts`:
```typescript
import { Component } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
standalone: true,
imports: [FontAwesomeModule], // alternatively, individual components can be imported
templateUrl: './app.component.html'
})
export class AppComponent {
faCoffee = faCoffee;
}
```
1. Use the icon in the template
`src/app/app.component.html`:
```html
```
## Documentation
* [In-depth usage guide](./docs/usage.md)
* [Using other styles](./docs/usage/using-other-styles.md)
* [Full feature list](./docs/usage/features.md)
* [Upgrading instructions](UPGRADING.md)
* [Frequency asked questions](./docs/faq.md)
## Examples
### Stackblitz
Here's a [StackBlitz Starter Sample](https://stackblitz.com/edit/angular-ivy-7jrcne) on how to display Solid, Regular, and Brand icons [using the Icon Library](./docs/usage/icon-library.md#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](./DEVELOPER.md#setting-up-the-local-environment) on your own machine.
## Contributing
`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.
## 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.**
[
](https://github.com/devoto13)
[
](https://github.com/zeevkatz)
[
](https://github.com/scttcper)
[
](https://github.com/DavidePastore)
[
](https://github.com/donmckenna)
[
](https://github.com/paustint)
[
](https://github.com/mzellho)
[
](https://github.com/elebitzero)
[
](https://github.com/mcenkar)
[
](https://github.com/SiddAjmera)
[
](https://github.com/stephaniepurvis)
[
](https://github.com/loicgasser)
[
](https://github.com/damienwebdev)
[
](https://github.com/ronniebarker)
[
](https://github.com/bhanuhiteshi)
[
](https://github.com/MrSuttonmann)
[
](https://github.com/ej2)
[
](https://github.com/peterblazejewicz)
[
](https://github.com/arjenbrandenburgh)
[
](https://github.com/athisun)
[
](https://github.com/madebyjeffrey)
[
](https://github.com/benjamincharity)
[
](https://github.com/NayeBeckham)
[
](https://github.com/Nosfistis)
[
](https://github.com/bleistift-zwei)
[
](https://github.com/orgs/FortAwesome/people)
If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.