Skip to content

Convert most FontAwesome elements to self-closing tags #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devoto13 merged 2 commits into from
Aug 3, 2025
Merged

Convert most FontAwesome elements to self-closing tags #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9599e3
Convert most FontAwesome elements to self-closing tags
Ionaru Aug 3, 2025
26a27a0
Restore testing.md spacing
Ionaru Aug 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion DEVELOPER.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ Thanks for taking the time to consider contributing to the project. You will fin
## Setting up the local environment

1. `git clone https://github.com/FortAwesome/angular-fontawesome`
1. `corepack enable` - to get the global `yarn` command
1. `cd angular-fontawesome`
1. `corepack enable` - to get the global `yarn` command
1. `yarn` - install dependencies
1. `yarn build:watch` (in terminal 1) - build the library and keep watching for changes
1. `yarn start` (in terminal 2) - start sample application using library distribution from the previous step
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ To get up and running using Font Awesome with Angular follow the below steps:
`src/app/app.component.html`:

```html
<fa-icon [icon]="faCoffee"></fa-icon>
<fa-icon [icon]="faCoffee" />
```

## Documentation
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/storybook.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ export default {
export const iconStory = () => ({
template: `
<button>
<fa-icon [icon]="homeIcon"></fa-icon>
<fa-icon [icon]="homeIcon" />
Go Home
</button>

<button>
<fa-icon [icon]="closeIcon"></fa-icon>
<fa-icon [icon]="closeIcon" />
Close
</button>
`,
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/styling-icon-internals.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ fa-icon.fancy svg path {

```angular2html
<!-- app.component.html -->
<fa-icon icon="user" class="fancy"></fa-icon>
<fa-icon icon="user" class="fancy" />
```

## Use `::ng-deep` pseudo-class selector
Expand All @@ -31,7 +31,7 @@ import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: '<fa-icon icon="user" class="fancy"></fa-icon>',
template: '<fa-icon icon="user" class="fancy" />',
styles: [`
fa-icon.fancy ::ng-deep svg path {
fill: #ffffff;
Expand Down
8 changes: 4 additions & 4 deletions docs/guide/testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';

@Component({
selector: 'app-explicit-reference',
template: '<fa-icon [icon]="faUser"></fa-icon>',
template: '<fa-icon [icon]="faUser" />',
})
export class ExplicitReferenceComponent {
faUser = faUser;
Expand Down Expand Up @@ -85,7 +85,7 @@ import { Component } from '@angular/core';

@Component({
selector: 'app-regular-icon-library',
template: '<fa-icon icon="user"></fa-icon>',
template: '<fa-icon icon="user" />',
})
export class IconLibraryComponent {}
```
Expand Down Expand Up @@ -128,7 +128,7 @@ import { Component } from '@angular/core';

@Component({
selector: 'app-regular-icon-library',
template: '<fa-icon icon="user"></fa-icon>',
template: '<fa-icon icon="user" />',
})
export class IconLibraryComponent {}
```
Expand Down Expand Up @@ -175,7 +175,7 @@ import { Component } from '@angular/core';

@Component({
selector: 'app-regular-icon-library',
template: '<fa-icon icon="user"></fa-icon>',
template: '<fa-icon icon="user" />',
})
export class IconLibraryComponent {}
```
Expand Down
2 changes: 1 addition & 1 deletion docs/upgrading/1.0.0-2.0.0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class HostComponent {
```diff
@Component({
selector: 'fa-host',
template: '<fa-icon [icon]="faUser" (click)="spinIcon()"></fa-icon>'
template: '<fa-icon [icon]="faUser" (click)="spinIcon()" />'
})
class HostComponent {
readonly faUser = faUser;
Expand Down
2 changes: 1 addition & 1 deletion docs/usage/explicit-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ While this approach is more verbose than the [icon library](./icon-library.md) a

```html
<div style="text-align:center">
<fa-icon [icon]="faCoffee"></fa-icon>
<fa-icon [icon]="faCoffee" />
</div>
```

Expand Down
83 changes: 43 additions & 40 deletions docs/usage/features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,60 +7,59 @@ The following features are available as part of Font Awesome. Note that the synt
### Size
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons)
```html
<fa-icon [icon]="['fas', 'coffee']" size="xs"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="lg"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" size="xs" />
<fa-icon [icon]="['fas', 'coffee']" size="lg" />
<fa-icon [icon]="['fas', 'coffee']" size="6x" />
```

### Fixed Width
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons):

```html
<fa-icon [icon]="['fas', 'coffee']" [fixedWidth]="true"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" [fixedWidth]="true" />
```

### Rotate
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons):

```html
<fa-icon [icon]="['fas', 'coffee']" [rotate]="90"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" [rotate]="180"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" [rotate]="270"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" [rotate]="90" />
<fa-icon [icon]="['fas', 'coffee']" [rotate]="180" />
<fa-icon [icon]="['fas', 'coffee']" [rotate]="270" />
<!-- Or any value supported by the rotate() transform can be specified. -->
<fa-icon [icon]="['fas', 'coffee']" rotate="45deg"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" rotate="45deg" />
```

### Flip
* horizontally, vertically, or both

```html
<fa-icon [icon]="['fas', 'coffee']" flip="horizontal"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="vertical"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="both"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" flip="horizontal" />
<fa-icon [icon]="['fas', 'coffee']" flip="vertical" />
<fa-icon [icon]="['fas', 'coffee']" flip="both" />
```

### Animations
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)

```html
<fa-icon [icon]="['fas', 'cog']" animation="spin"></fa-icon>
<fa-icon [icon]="['fas', 'heart']" animation="beat"></fa-icon>
<fa-icon [icon]="['fas', 'bell']" animation="shake"></fa-icon>
<fa-icon [icon]="['fas', 'cog']" animation="spin" />
<fa-icon [icon]="['fas', 'heart']" animation="beat" />
<fa-icon [icon]="['fas', 'bell']" animation="shake" />
```

### Border
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):

```html
<fa-icon [icon]="['fas', 'coffee']" [border]="true"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" [border]="true" />
```

### Pull
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):

```html
<fa-icon [icon]="['fas', 'coffee']" pull="left"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" pull="right"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" pull="left" /> <fa-icon [icon]="['fas', 'coffee']" pull="right" />
```

### Custom styles
Expand All @@ -69,12 +68,12 @@ Simple styles can be applied using usual [class and style bindings](https://angu

```css
.red-icon {
color: red;
color: red;
}
```

```html
<fa-icon [icon]="['fas', 'coffee']" class="red-icon" [style]="{display: 'inline-block', padding: '5px'}"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" class="red-icon" [style]="{display: 'inline-block', padding: '5px'}" />
```

For more advanced styling, see [Styling icon internals](../guide/styling-icon-internals.md).
Expand All @@ -86,60 +85,64 @@ For more advanced styling, see [Styling icon internals](../guide/styling-icon-in
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#basic-use):

```html
<fa-duotone-icon [icon]="['fad', 'coffee']"></fa-duotone-icon>
<fa-duotone-icon [icon]="['fad', 'coffee']" />
```

### Swap layers opacity

[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#swapping-layers):

```html
<fa-duotone-icon [icon]="['fad', 'coffee']" swapOpacity="true"></fa-duotone-icon>
<fa-duotone-icon [icon]="['fad', 'coffee']" swapOpacity="true" />
```

### Customize layers opacity

[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity):

```html
<fa-duotone-icon [icon]="['fad', 'coffee']" primaryOpacity="0.9"></fa-duotone-icon>
<fa-duotone-icon [icon]="['fad', 'coffee']" secondaryOpacity="0.1"></fa-duotone-icon>
<fa-duotone-icon [icon]="['fad', 'coffee']" primaryOpacity="0.9" />
<fa-duotone-icon [icon]="['fad', 'coffee']" secondaryOpacity="0.1" />
```

### Customize layers color

[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#coloring):

```html
<fa-duotone-icon [icon]="['fad', 'coffee']" primaryColor="red"></fa-duotone-icon>
<fa-duotone-icon [icon]="['fad', 'coffee']" secondaryColor="blue"></fa-duotone-icon>
<fa-duotone-icon [icon]="['fad', 'coffee']" primaryColor="red" />
<fa-duotone-icon [icon]="['fad', 'coffee']" secondaryColor="blue" />
```

## Advanced Usage

### Mask
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/masking)
```html
<fa-icon [icon]="['fas', 'coffee']" [mask]="['fas', 'square']"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" [mask]="['fas', 'square']" />
```

### Transform
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)

```html
<fa-icon [icon]="['fas', 'coffee']" transform="shrink-9 right-4"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" transform="shrink-9 right-4" />
```

### Stateful Animations
```html
<fa-icon [icon]="['fas', 'sync']" [animation]="isSyncAnimated ? 'spin' : undefined" (click)="isSyncAnimated=!isSyncAnimated"></fa-icon>
<fa-icon
[icon]="['fas', 'sync']"
[animation]="isSyncAnimated ? 'spin' : undefined"
(click)="isSyncAnimated=!isSyncAnimated"
/>
```

### Transform within binding:

```html
<fa-icon [icon]="['fas', 'magic']" transform="rotate-{{magicLevel}}"></fa-icon>
<input type='range' [value]="magicLevel" (input)="magicLevel=$event.target.value"/>
<fa-icon [icon]="['fas', 'magic']" transform="rotate-{{magicLevel}}" />
<input type="range" [value]="magicLevel" (input)="magicLevel=$event.target.value" />
```
(Slide input range to "turn up the magic")

Expand All @@ -151,8 +154,8 @@ Each `<fa-icon>` declared inside an `<fa-stack>` element **must** include the `s

```html
<fa-stack>
<fa-icon [icon]="faCircle" stackItemSize="2x"></fa-icon>
<fa-icon [icon]="solidFlag" [inverse]="true" stackItemSize="1x"></fa-icon>
<fa-icon [icon]="faCircle" stackItemSize="2x" />
<fa-icon [icon]="solidFlag" [inverse]="true" stackItemSize="1x" />
</fa-stack>
```

Expand All @@ -163,8 +166,8 @@ When using standalone components, make sure to also add `FaStackItemSizeDirectiv

```html
<fa-layers [fixedWidth]="true">
<fa-icon [icon]="['fas', 'square']"></fa-icon>
<fa-icon [inverse]="true" [icon]="['fas', 'spinner']" transform="shrink-6"></fa-icon>
<fa-icon [icon]="['fas', 'square']" />
<fa-icon [inverse]="true" [icon]="['fas', 'spinner']" transform="shrink-6" />
</fa-layers>
```

Expand All @@ -173,8 +176,8 @@ When using standalone components, make sure to also add `FaStackItemSizeDirectiv

```html
<fa-layers [fixedWidth]="true">
<fa-icon [icon]="['fas', 'square']"></fa-icon>
<fa-layers-text content="Yo" style="color: white;" transform="shrink-4"></fa-layers-text>
<fa-icon [icon]="['fas', 'square']" />
<fa-layers-text content="Yo" style="color: white;" transform="shrink-4" />
</fa-layers>
```

Expand All @@ -183,8 +186,8 @@ When using standalone components, make sure to also add `FaStackItemSizeDirectiv

```html
<fa-layers [fixedWidth]="true">
<fa-icon [icon]="['fas', 'envelope']"></fa-icon>
<fa-layers-counter content="99+"></fa-layers-counter>
<fa-icon [icon]="['fas', 'envelope']" />
<fa-layers-counter content="99+" />
</fa-layers>
```

Expand Down Expand Up @@ -220,7 +223,7 @@ To update `FaIconComponent` programmatically:
```ts
@Component({
selector: 'fa-host',
template: '<fa-icon [icon]="faUser" (click)="spinIcon()"></fa-icon>'
template: '<fa-icon [icon]="faUser" (click)="spinIcon()" />',
})
class HostComponent {
readonly faUser = faUser;
Expand Down Expand Up @@ -259,7 +262,7 @@ To update `FaIconComponent` programmatically:
```ts
@Component({
selector: 'fa-host',
template: '<fa-icon [icon]="faUser" (click)="spinIcon()"></fa-icon>'
template: '<fa-icon [icon]="faUser" (click)="spinIcon()" />'
})
class HostComponent {
faUser = faUser;
Expand Down
4 changes: 2 additions & 2 deletions docs/usage/icon-library.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ Icons should be registered only once in the `AppComponent`'s constructor using `

```html
<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<fa-icon icon="coffee" />
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
<fa-icon [icon]="['fas', 'coffee']" />
```

`src/app/app.component.ts`
Expand Down
4 changes: 2 additions & 2 deletions docs/usage/using-other-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,6 @@ export class AppModule {
```

```html
<fa-icon [icon]="['fas', 'star']"></fa-icon>
<fa-icon [icon]="['far', 'star']"></fa-icon>
<fa-icon [icon]="['fas', 'star']" />
<fa-icon [icon]="['far', 'star']" />
```
6 changes: 3 additions & 3 deletions projects/demo/src/app/alternate-prefix.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ <h3>Example of setting the default icon prefix</h3>
The default icon prefix is usually <code>fas</code> but can be adjusted by injecting the <code>FaConfig</code> and
changing the <code>defaultPrefix</code> property.
</p>
<fa-icon icon="user" size="lg" [fixedWidth]="true"></fa-icon>
<fa-icon icon="hand-paper" size="lg" [fixedWidth]="true"></fa-icon>
<fa-icon icon="bell-slash" size="lg" [fixedWidth]="true"></fa-icon>
<fa-icon icon="user" size="lg" [fixedWidth]="true" />
<fa-icon icon="hand-paper" size="lg" [fixedWidth]="true" />
<fa-icon icon="bell-slash" size="lg" [fixedWidth]="true" />
</span>
Loading