這篇文章跟大家介紹什麼是Font Awesome，以及Angular專案中加入Font Awesome，使用Font Awesome圖示函式庫的方法，希望對大家有幫助。
在這篇文章中，我們將研究如何在Angular應用程式中使用Font Awesome，以及如何使用Font Awesome的圖示動畫和樣式設計。 【相關教學推薦：《angular教學》】
#在我們進一步討論之前，先來談談Font Awesome是什麼。
Font Awesome是一個圖標工具包，有1500多個免費圖標，使用起來非常方便。這些圖示是使用可擴展的向量創建的，並且在應用到它們時繼承了CSS的尺寸和顏色。這使得它們成為高品質的圖標，在任何螢幕尺寸上都能很好地工作。
在Angular 5發布之前，開發者必須安裝Font Awesome包，並在Angular專案中引用其CSS才能使用。
但是Angular 5的發布，透過為Font Awesome創建Angular元件，使得在我們的專案中實現Font Awesome變得容易了。有了這個功能，Font Awesome可以乾淨俐落地整合到我們的專案中。
由於Font Awesome圖示的可擴展性，它能很好地與文字內聯融合。在這篇文章中，我們將進一步探討如何為Font Awesome圖示使用動畫、著色和尺寸。
讓我們為本教程創建一個演示的Angular應用程式。打開你的終端，CD到專案目錄，並執行下面的命令。
在你執行該指令之前，確保你的系統已經安裝了Node.js，同時也安裝了Angular CLI。
ng new angular-fontawesome复制代码
對於那些已有專案的人，我們可以從這裡開始跟進。上面的指令完成後，CD到專案目錄，安裝下面的Font Awesome圖示指令。
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
在Angular專案中使用Font Awesome有兩個步驟。讓我們來看看這兩點。
這一步驟與在元件層級使用Font Awesome圖示有關，這不是一個好的方法，因為它涉及到我們將圖示導入到每個需要圖示的元件中，而且還要多次導入相同的圖示。
我們還是要看看如何在一個元件中使用圖標，以備我們在建立一個應用程式時需要我們在一個元件中使用圖標。
安裝完Font Awesome後，打開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' ，並有專業許可證。
'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/
更多编程相关知识，请访问：编程视频！！
以上是淺談Angular中如何添加和使用Font Awesome的詳細內容。更多資訊請關注PHP中文網其他相關文章！
