In diesem Artikel erfahren Sie, was Font Awesome ist und wie Sie Font Awesome zum Angular-Projekt hinzufügen und die Font Awesome-Symbolbibliothek verwenden. Ich hoffe, dass es für alle hilfreich ist.
In diesem Artikel schauen wir uns an, wie man Font Awesome in einer Angular-Anwendung verwendet und wie man Symbole mit Font Awesome animiert und gestaltet. [Ähnliche Tutorial-Empfehlung: „Angular-Tutorial“]
Bevor wir weiter diskutieren, lassen Sie uns zunächst darüber sprechen, was Font Awesome ist.
Font Awesome
Font Awesome ist ein Icon-Toolkit mit mehr als 1500 kostenlosen Icons, das sehr einfach zu verwenden ist. Die Symbole werden mithilfe skalierbarer Vektoren erstellt und erben die Abmessungen und Farben von CSS, wenn sie auf sie angewendet werden. Dies macht sie zu hochwertigen Symbolen, die auf jeder Bildschirmgröße gut funktionieren.
Vor der Veröffentlichung von Angular 5 müssen Entwickler das Font Awesome-Paket installieren und in Angular-Projekten auf dessen CSS verweisen, um es verwenden zu können.
Aber die Veröffentlichung von Angular 5 hat es einfacher gemacht, Font Awesome in unseren Projekten zu implementieren, indem Angular-Komponenten für Font Awesome erstellt wurden. Mit dieser Funktion lässt sich Font Awesome sauber in unsere Projekte integrieren.
Aufgrund der Skalierbarkeit der Font Awesome-Symbole fügen sie sich gut in den Text ein. In diesem Artikel werfen wir einen genaueren Blick auf die Verwendung von Animationen, Farben und Größen für Font Awesome-Symbole.
Erstellen Sie eine Demo-Angular-Anwendung.
Lassen Sie uns eine Demo-Angular-Anwendung für dieses Tutorial erstellen. Öffnen Sie Ihr Terminal, legen Sie die CD in das Projektverzeichnis und führen Sie den folgenden Befehl aus.
Bevor Sie diesen Befehl ausführen, stellen Sie sicher, dass auf Ihrem System Node.js und auch Angular CLI installiert sind.
ng new angular-fontawesome复制代码
Nach dem Login kopieren
Font Awesome-Abhängigkeiten installieren
Für diejenigen unter Ihnen, die bereits ein Projekt haben, können wir von hier aus weitermachen. Nachdem der obige Befehl ausgeführt wurde, wechseln Sie mit der CD in das Projektverzeichnis und installieren Sie den folgenden Font Awesome-Symbolbefehl.
npm install @fortawesome/angular-fontawesome
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons
# or
yarn add @fortawesome/angular-fontawesome
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-solid-svg-icons
Nach dem Login kopieren
Font Awesome-Symbole in Angular-Anwendungen verwenden
Die Verwendung von Font Awesome in Angular-Projekten erfolgt in zwei Schritten. Schauen wir uns diese beiden Punkte an.
- So verwenden Sie Font Awesome-Symbole auf Komponentenebene
- So verwenden Sie die Font Awesome-Symbolbibliothek
So verwenden Sie Font Awesome-Symbole auf Komponentenebene
Dieser Schritt bezieht sich auf die Verwendung von Font Awesome-Symbolen auf der Komponente Ebene, was keine gute Methode ist, da wir das Symbol in jede Komponente importieren müssen, die ein Symbol erfordert, aber auch dasselbe Symbol mehrmals importieren müssen.
Wir müssen noch prüfen, wie Symbole in einer Komponente verwendet werden, falls wir beim Erstellen einer Anwendung Symbole in einer Komponente verwenden müssen.
Öffnen Sie nach der Installation von Font Awesome app.module.ts und importieren Sie FontAwesomeModule, wie unten gezeigt. app.module.ts ，导入FontAwesomeModule ，就像下面这样。
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule
],Nach dem Login kopieren
之后，打开app.component.ts ，导入你想使用的图标名称。比方说，我们想利用faCoffee 。
import { faCoffee } from '@fortawesome/free-solid-svg-icons';复制代码Nach dem Login kopieren
接下来，我们创建一个名为faCoffee 的变量，并将我们导入的图标分配给该变量，这样就可以在app.component.html 中使用它。如果我们不这样做，我们就不能使用它。
faCoffee = faCoffee;
Nach dem Login kopieren
现在，在app.component.html ，写下下面的代码。
<div>
<fa-icon [icon]="faCoffee"></fa-icon>
</div>Nach dem Login kopieren
运行该命令，为我们的应用程序提供服务，并检查我们的图标是否显示。
ng serve
Nach dem Login kopieren
如果我们看一下我们的网页，我们会看到faCoffee 显示在屏幕上。这表明图标已经安装并成功导入。
如何使用Font Awesome图标库
这是我们在应用程序中使用Font Awesome的最佳方法，特别是当我们想在所有组件中使用它，而不需要重新导入图标或多次导入一个图标时。让我们来看看我们如何实现这个目标。
打开app.module.ts ，写下下面的代码。
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIcons(fasStar, farStar);
}
}Nach dem Login kopieren
之后，我们可以直接在app.component.html 里面使用它，而不需要在使用它之前声明一个变量并把它传给那个变量。
<div>
<fa-icon [icon]="['fas', 'star']"></fa-icon>
<fa-icon [icon]="['far', 'star']"></fa-icon>
</div>Nach dem Login kopieren
如果我们现在加载网页，我们将看到星星图标被显示出来。
Font Awesome中的图标样式
Font Awesome有四种不同的风格，我们来看看免费的图标--除去Pro light图标，它使用前缀'fal'
// from black
<fa-icon [icon]="['fab', 'angular']" ></fa-icon>
// to red
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
Danach öffnen Sie
app.component.ts und importieren den Symbolnamen, den Sie verwenden möchten. Nehmen wir an, wir möchten
faCoffee nutzen. 🎜
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="xs"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="sm"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="lg"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="5x"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="10x"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
🎜Als nächstes erstellen wir eine Variable namens
faCoffee und weisen dieser Variablen unser importiertes Symbol zu, damit es in
app.component.html zu finden ist. Verwenden Sie es. Wenn wir das nicht tun, können wir es nicht nutzen. 🎜
<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'blue' }"
size="10x"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
🎜Schreiben Sie nun in
app.component.html den folgenden Code. 🎜
<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"
size="10x"
[spin]="true"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
🎜Führen Sie diesen Befehl aus, um unsere Anwendung bereitzustellen und prüfen Sie, ob unser Symbol angezeigt wird. 🎜rrreee🎜Wenn wir einen Blick auf unsere Webseite werfen, sehen wir
faCoffee auf dem Bildschirm. Dies zeigt an, dass das Symbol erfolgreich installiert und importiert wurde. 🎜
So verwenden Sie die Font Awesome-Symbolbibliothek 🎜🎜Dies ist für uns die beste Möglichkeit, Font Awesome in unserer Anwendung zu verwenden, insbesondere wenn wir es in allen Komponenten ohne When you verwenden möchten Sie müssen ein Symbol erneut oder mehrmals importieren. Mal sehen, wie wir dieses Ziel erreichen. 🎜🎜Öffnen Sie app.module.ts und schreiben Sie den folgenden Code. 🎜rrreee🎜Danach können wir es direkt in app.component.html verwenden, ohne eine Variable deklarieren und vor der Verwendung an diese Variable übergeben zu müssen. 🎜rrreee🎜Wenn wir die Webseite jetzt laden, wird das Sternsymbol angezeigt. 🎜Symbolstile in Font Awesome 🎜🎜Font Awesome hat vier verschiedene Stile, werfen wir einen Blick auf die kostenlosen Symbole – mit Ausnahme der Pro Light-Symbole, die das Präfix 'fal' mit einer Berufslizenz. 🎜- 实体图标使用前缀
'fas' ，并从以下网站导入：@fortawesome/free-regular-svg-icons - 普通图标使用前缀
'far' ，并从以下网站导入@fortawesome/free-solid-svg-icons - 品牌图标使用前缀
'fab' ，并从以下网站导入。@fortawesome/free-brands-svg-icons
接下来，让我们看看我们还能用Font Awesome图标做什么。
不用写CSS样式就能改变图标的颜色和大小
让我们来看看我们如何在Angular中不写CSS样式就能改变Font Awesome图标的颜色。
这种方法有助于我们在组件层面上使用图标。然而，当在所有的组件中使用这种方法时，它是没有帮助的，因为它将改变我们项目中所有组件的图标颜色。对于多个组件，我们可以只用一个CSS类或样式属性来改变它一次。
但是，当我们在一个组件层面上工作时，我们可以使用它，因为我们将只在该组件中使用该图标，而不是为它创建一个CSS属性并在CSS文件中设置样式。因此，让我们看看我们如何在Angular项目中做到这一点。默认情况下，下面的图标是black ，我们想把它改成red 。
// from black
<fa-icon [icon]="['fab', 'angular']" ></fa-icon>
// to red
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
当使用内联造型改变图标颜色和笔画时，我们必须利用fa-icon 属性。
接下来，我们要在Angular中使用内联样式将图标的大小从小到大。要做到这一点，我们必须使用size 属性的fa-icon 。
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="xs"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="sm"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="lg"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="5x"
></fa-icon>
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
size="10x"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
默认情况下，Font Awesome图标会继承父容器的大小。它允许它们与我们可能使用的任何文本相匹配，但如果我们不喜欢默认的尺寸，我们必须给它们我们想要的尺寸。
我们使用xs,sm,lg,5x, 和10x 等类。这些类将图标的大小增加和减少到我们想要的程度。
动画化Font Awesome图标
让我们也来看看我们如何在不使用Angular中的CSS或动画库的情况下对Font Awesome图标进行动画。
作为一个开发者，当用户点击一个提交按钮或页面正在加载时，我们可能想显示一个加载器或旋转器的效果，告诉用户有东西正在加载。
我们可以使用Font Awesome图标来达到这个目的。我们不需要导入一个外部的CSS动画库，而只需要在图标标签上添加Font Awesomespin 属性。
这样做可以避免我们下载一个完整的CSS动画库，而最终使用一个旋转的效果或使用关键帧编写一个长的CSS动画。
因此，让我们来看看我们如何通过使用React图标来实现这一点。
<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'blue' }"
size="10x"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
我们刚刚导入了React图标，现在我们要对它进行动画处理。在React图标组件上，添加Font Awesomespin loader属性。
<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"
size="10x"
[spin]="true"
></fa-icon>Nach dem Login kopieren
Nach dem Login kopieren
当我们加载网页时，我们会看到React图标在无限地旋转。这是因为我们把spin 属性设置为true 。
总结
在这篇文章中，我们能够看到如何在Angular项目中使用Font Awesome图标，如何添加图标库中的一些基本样式，以及如何对图标进行动画处理。
我们还可以用Font Awesome图标做更多的事情，比如固定宽度图标、旋转图标、Power Transforms和组合两个图标。Font Awesome的教程可以教你更多关于如何在你的项目中使用这些工具。
如果你觉得这篇文章有帮助，请与你的朋友分享。
英文原文地址：https://blog.logrocket.com/how-to-add-font-awesome-angular-project/
更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man Font Awesome in Angular hinzufügt und verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
