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 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.
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复制代码
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
Die Verwendung von Font Awesome in Angular-Projekten erfolgt in zwei Schritten. Schauen wir uns diese beiden Punkte an.
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
],之后，打开app.component.ts ，导入你想使用的图标名称。比方说，我们想利用faCoffee 。
import { faCoffee } from '@fortawesome/free-solid-svg-icons';复制代码接下来，我们创建一个名为faCoffee 的变量，并将我们导入的图标分配给该变量，这样就可以在app.component.html 中使用它。如果我们不这样做，我们就不能使用它。
faCoffee = faCoffee;
现在，在app.component.html ，写下下面的代码。
<div>
<fa-icon [icon]="faCoffee"></fa-icon>
</div>运行该命令，为我们的应用程序提供服务，并检查我们的图标是否显示。
ng serve
如果我们看一下我们的网页，我们会看到faCoffee 显示在屏幕上。这表明图标已经安装并成功导入。
这是我们在应用程序中使用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);
}
}之后，我们可以直接在app.component.html 里面使用它，而不需要在使用它之前声明一个变量并把它传给那个变量。
<div>
<fa-icon [icon]="['fas', 'star']"></fa-icon>
<fa-icon [icon]="['far', 'star']"></fa-icon>
</div>如果我们现在加载网页，我们将看到星星图标被显示出来。
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>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>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>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>faCoffee auf dem Bildschirm. Dies zeigt an, dass das Symbol erfolgreich installiert und importiert wurde. 🎜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. 🎜 'fal' mit einer Berufslizenz. 🎜'fas' ，并从以下网站导入：@fortawesome/free-regular-svg-icons'far' ，并从以下网站导入@fortawesome/free-solid-svg-icons'fab' ，并从以下网站导入。@fortawesome/free-brands-svg-icons接下来，让我们看看我们还能用Font Awesome图标做什么。
让我们来看看我们如何在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>当使用内联造型改变图标颜色和笔画时，我们必须利用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>默认情况下，Font Awesome图标会继承父容器的大小。它允许它们与我们可能使用的任何文本相匹配，但如果我们不喜欢默认的尺寸，我们必须给它们我们想要的尺寸。
我们使用xs,sm,lg,5x, 和10x 等类。这些类将图标的大小增加和减少到我们想要的程度。
让我们也来看看我们如何在不使用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>我们刚刚导入了React图标，现在我们要对它进行动画处理。在React图标组件上，添加Font Awesomespin loader属性。
<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"
size="10x"
[spin]="true"
></fa-icon>当我们加载网页时，我们会看到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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
