Icons FontAwesome (Angular): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (16 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
== Installation == | == Installation == | ||
=== 01.05.2020 === | |||
<pre> | |||
npm install --save @fortawesome/fontawesome-free | |||
</pre> | |||
<pre> | |||
"styles": [ | |||
... | |||
"node_modules/@fortawesome/fontawesome-free/css/all.min.css", | |||
... | |||
], | |||
</pre> | |||
<pre> | |||
@import "~@fortawesome/fontawesome-free/css/all.min.css"; | |||
</pre> | |||
==== Links ==== | |||
[https://dev.to/angular/angular-fontawesome-in-five-easy-steps-3oe9 https://dev.to/angular/angular-fontawesome-in-five-easy-steps-3oe9] | |||
=== 14.02.2019 === | |||
<pre> | <pre> | ||
| Zeile 18: | Zeile 42: | ||
], | ], | ||
</pre> | </pre> | ||
==== Links ==== | |||
[https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons] | |||
== Verwendung == | == Verwendung == | ||
=== Im Modul === | === Allgemein === | ||
==== Im Modul ==== | |||
<pre> | <pre> | ||
| Zeile 45: | Zeile 75: | ||
</pre> | </pre> | ||
=== In der Komponente === | ==== In der Komponente ==== | ||
<pre> | <pre> | ||
| Zeile 51: | Zeile 81: | ||
</pre> | </pre> | ||
=== Links === | ==== Links ==== | ||
[https://github.com/FortAwesome/angular-fontawesome#usage https://github.com/FortAwesome/angular-fontawesome#usage] | [https://github.com/FortAwesome/angular-fontawesome#usage https://github.com/FortAwesome/angular-fontawesome#usage] | ||
| Zeile 57: | Zeile 87: | ||
[https://fontawesome.com/free https://fontawesome.com/free] | [https://fontawesome.com/free https://fontawesome.com/free] | ||
=== | === Select-Option === | ||
Da <code><option></code> nur Text enthalten darf, ist eine Einbindung von Icons über CSS-Klassen nicht möglich. Jedoch basieren ''FontAwesome''-Icons auf Unicode und können daher über diese eingebunden werden. Wichtig ist, dass im ''select''-Tag ''FontAwesome'', gefolgt von einer anderen als Font-Family angegeben wird: <code>style="font-family:'FontAwesome', Arial;"</code> | |||
[https:// | <pre> | ||
<select formControlName="rating" style="font-family:'FontAwesome', Arial;"> | |||
<option value="0"></option> | |||
<option value="1">&#xf005;</option> | |||
<option value="2">&#xf005;&#xf005;</option> | |||
<option value="3">&#xf005;&#xf005;&#xf005;</option> | |||
<option value="4">&#xf005;&#xf005;&#xf005;&#xf005;</option> | |||
<option value="5">&#xf005;&#xf005;&#xf005;&#xf005;&#xf005;</option> | |||
</select> | |||
</pre> | |||
=== Table-Column === | |||
<pre> | |||
<td style="font-family: FontAwesome;"> | |||
\u{f005} | |||
</td> | |||
</pre> | |||
==== Links ==== | |||
[https://github.com/FortAwesome/Font-Awesome/issues/996 https://github.com/FortAwesome/Font-Awesome/issues/996] | |||
Zurück zu [[Angular#Icons|Angular]] | Zurück zu [[Angular#Icons|Angular]] | ||
Aktuelle Version vom 1. Mai 2020, 12:47 Uhr
Installation
01.05.2020
npm install --save @fortawesome/fontawesome-free
"styles": [ ... "node_modules/@fortawesome/fontawesome-free/css/all.min.css", ... ],
@import "~@fortawesome/fontawesome-free/css/all.min.css";
Links
https://dev.to/angular/angular-fontawesome-in-five-easy-steps-3oe9
14.02.2019
npm install font-awesome --save
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/angular-fontawesome
"styles": [ ... "node_modules/font-awesome/css/font-awesome.min.css", ... ],
Links
https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons
Verwendung
Allgemein
Im Modul
...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@NgModule({
...,
imports: [
...,
FontAwesomeModule
],
...
})
export class AppModule {
constructor() {
/* Add an icon to the library for convenient access in other components */
library.add(faCoffee);
}
}
In der Komponente
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
Links
https://github.com/FortAwesome/angular-fontawesome#usage
Select-Option
Da <option> nur Text enthalten darf, ist eine Einbindung von Icons über CSS-Klassen nicht möglich. Jedoch basieren FontAwesome-Icons auf Unicode und können daher über diese eingebunden werden. Wichtig ist, dass im select-Tag FontAwesome, gefolgt von einer anderen als Font-Family angegeben wird: style="font-family:'FontAwesome', Arial;"
<select formControlName="rating" style="font-family:'FontAwesome', Arial;"> <option value="0"></option> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> </select>
Table-Column
<td style="font-family: FontAwesome;">
\u{f005}
</td>
Links
https://github.com/FortAwesome/Font-Awesome/issues/996
Zurück zu Angular