淺談Angular中如何添加和使用Font Awesome-js教程-PHP中文網

這篇文章跟大家介紹什麼是Font Awesome，以及Angular專案中加入Font Awesome，使用Font Awesome圖示函式庫的方法，希望對大家有幫助。

淺談Angular中如何添加和使用Font Awesome

在這篇文章中，我們將研究如何在Angular應用程式中使用Font Awesome，以及如何使用Font Awesome的圖示動畫和樣式設計。【相關教學推薦：《angular教學》】

#在我們進一步討論之前，先來談談Font Awesome是什麼。

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應用程式

讓我們為本教程創建一個演示的Angular應用程式。打開你的終端，CD到專案目錄，並執行下面的命令。

在你執行該指令之前，確保你的系統已經安裝了Node.js，同時也安裝了Angular CLI。

ng new angular-fontawesome复制代码

登入後複製

安裝Font Awesome依賴項

對於那些已有專案的人，我們可以從這裡開始跟進。上面的指令完成後，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圖示

在Angular專案中使用Font Awesome有兩個步驟。讓我們來看看這兩點。

如何在元件層級上使用Font Awesome圖示
如何使用Font Awesome圖示庫

如何在元件層級上使用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，寫下下面的程式碼。

登入後複製

運行該命令，為我們的應用程式提供服務，並檢查我們的圖標是否顯示。

ng serve

登入後複製

如果我們看一下我們的網頁，我們會看到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); } }

登入後複製

之後，我們可以直接在app.component.html裡面使用它，而不需要在使用它之前宣告一個變數並把它傳給那個變數。

登入後複製

如果我們現在載入網頁，我們將看到星星圖示被顯示出來。