今天就跟大家聊聊有關(guān)Angular中怎么添加和使用Font Awesome，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的宜豐網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

Font Awesome

Font Awesome是一個(gè)圖標(biāo)工具包，有1500多個(gè)免費(fèi)圖標(biāo)，使用起來(lái)非常方便。這些圖標(biāo)是使用可擴(kuò)展的矢量創(chuàng)建的，并且在應(yīng)用到它們時(shí)繼承了CSS的尺寸和顏色。這使得它們成為高質(zhì)量的圖標(biāo)，在任何屏幕尺寸上都能很好地工作。

在Angular 5發(fā)布之前，開(kāi)發(fā)者必須安裝Font Awesome包，并在Angular項(xiàng)目中引用其CSS才能使用。

但是Angular 5的發(fā)布，通過(guò)為Font Awesome創(chuàng)建Angular組件，使得在我們的項(xiàng)目中實(shí)現(xiàn)Font Awesome變得容易了。有了這個(gè)功能，F(xiàn)ont Awesome可以干凈利落地集成到我們的項(xiàng)目中。

由于Font Awesome圖標(biāo)的可伸縮性，它能很好地與文本內(nèi)聯(lián)融合。在這篇文章中，我們將進(jìn)一步探討如何為Font Awesome圖標(biāo)使用動(dòng)畫(huà)、著色和尺寸。

創(chuàng)建一個(gè)演示的Angular應(yīng)用程序

讓我們?yōu)楸窘坛虅?chuàng)建一個(gè)演示的Angular應(yīng)用程序。打開(kāi)你的終端，CD到項(xiàng)目目錄，并運(yùn)行下面的命令。

在你運(yùn)行該命令之前，確保你的系統(tǒng)已經(jīng)安裝了Node.js，同時(shí)也安裝了Angular CLI。

ng new angular-fontawesome復(fù)制代碼

安裝Font Awesome依賴項(xiàng)

對(duì)于那些已有項(xiàng)目的人，我們可以從這里開(kāi)始跟進(jìn)。上面的命令完成后，CD到項(xiàng)目目錄，安裝下面的Font Awesome圖標(biāo)命令。

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應(yīng)用程序中使用Font Awesome圖標(biāo)

在Angular項(xiàng)目中使用Font Awesome有兩個(gè)步驟。我們來(lái)看看這兩點(diǎn)。

1. 如何在組件層面上使用Font Awesome圖標(biāo)

2. 如何使用Font Awesome圖標(biāo)庫(kù)

如何在組件層面上使用Font Awesome圖標(biāo)

這一步與在組件級(jí)使用Font Awesome圖標(biāo)有關(guān)，這不是一個(gè)好的方法，因?yàn)樗婕暗轿覀儗D標(biāo)導(dǎo)入到每個(gè)需要圖標(biāo)的組件中，而且還要多次導(dǎo)入相同的圖標(biāo)。

我們還是要看看如何在一個(gè)組件中使用圖標(biāo)，以備我們?cè)跇?gòu)建一個(gè)應(yīng)用程序時(shí)需要我們?cè)谝粋€(gè)組件中使用圖標(biāo)。

安裝完Font Awesome后，打開(kāi)app.module.ts ，導(dǎo)入FontAwesomeModule ，就像下面這樣。

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],

之后，打開(kāi)app.component.ts ，導(dǎo)入你想使用的圖標(biāo)名稱。比方說(shuō)，我們想利用faCoffee 。

import { faCoffee } from '@fortawesome/free-solid-svg-icons';復(fù)制代碼

接下來(lái)，我們創(chuàng)建一個(gè)名為faCoffee 的變量，并將我們導(dǎo)入的圖標(biāo)分配給該變量，這樣就可以在app.component.html 中使用它。如果我們不這樣做，我們就不能使用它。

faCoffee = faCoffee;

現(xiàn)在，在app.component.html ，寫(xiě)下下面的代碼。

運(yùn)行該命令，為我們的應(yīng)用程序提供服務(wù)，并檢查我們的圖標(biāo)是否顯示。

ng serve

如果我們看一下我們的網(wǎng)頁(yè)，我們會(huì)看到faCoffee 顯示在屏幕上。這表明圖標(biāo)已經(jīng)安裝并成功導(dǎo)入。

如何使用Font Awesome圖標(biāo)庫(kù)

這是我們?cè)趹?yīng)用程序中使用Font Awesome的最佳方法，特別是當(dāng)我們想在所有組件中使用它，而不需要重新導(dǎo)入圖標(biāo)或多次導(dǎo)入一個(gè)圖標(biāo)時(shí)。讓我們來(lái)看看我們?nèi)绾螌?shí)現(xiàn)這個(gè)目標(biāo)。

打開(kāi)app.module.ts ，寫(xiě)下下面的代碼。

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 里面使用它，而不需要在使用它之前聲明一個(gè)變量并把它傳給那個(gè)變量。

如果我們現(xiàn)在加載網(wǎng)頁(yè)，我們將看到星星圖標(biāo)被顯示出來(lái)。

Font Awesome中的圖標(biāo)樣式

Font Awesome有四種不同的風(fēng)格，我們來(lái)看看免費(fèi)的圖標(biāo)--除去Pro light圖標(biāo)，它使用前綴'fal' ，并有專業(yè)許可證。

• 實(shí)體圖標(biāo)使用前綴'fas' ，并從以下網(wǎng)站導(dǎo)入：@fortawesome/free-regular-svg-icons

• 普通圖標(biāo)使用前綴'far' ，并從以下網(wǎng)站導(dǎo)入@fortawesome/free-solid-svg-icons

• 品牌圖標(biāo)使用前綴'fab' ，并從以下網(wǎng)站導(dǎo)入。@fortawesome/free-brands-svg-icons

接下來(lái)，讓我們看看我們還能用Font Awesome圖標(biāo)做什么。

不用寫(xiě)CSS樣式就能改變圖標(biāo)的顏色和大小

讓我們來(lái)看看我們?nèi)绾卧贏ngular中不寫(xiě)CSS樣式就能改變Font Awesome圖標(biāo)的顏色。

這種方法有助于我們?cè)诮M件層面上使用圖標(biāo)。然而，當(dāng)在所有的組件中使用這種方法時(shí)，它是沒(méi)有幫助的，因?yàn)樗鼘⒏淖兾覀冺?xiàng)目中所有組件的圖標(biāo)顏色。對(duì)于多個(gè)組件，我們可以只用一個(gè)CSS類或樣式屬性來(lái)改變它一次。

但是，當(dāng)我們?cè)谝粋€(gè)組件層面上工作時(shí)，我們可以使用它，因?yàn)槲覀儗⒅辉谠摻M件中使用該圖標(biāo)，而不是為它創(chuàng)建一個(gè)CSS屬性并在CSS文件中設(shè)置樣式。因此，讓我們看看我們?nèi)绾卧贏ngular項(xiàng)目中做到這一點(diǎn)。默認(rèn)情況下，下面的圖標(biāo)是black ，我們想把它改成red 。

// from black


// to red

當(dāng)使用內(nèi)聯(lián)造型改變圖標(biāo)顏色和筆畫(huà)時(shí)，我們必須利用fa-icon 屬性。

接下來(lái)，我們要在Angular中使用內(nèi)聯(lián)樣式將圖標(biāo)的大小從小到大。要做到這一點(diǎn)，我們必須使用size 屬性的fa-icon 。

默認(rèn)情況下，F(xiàn)ont Awesome圖標(biāo)會(huì)繼承父容器的大小。它允許它們與我們可能使用的任何文本相匹配，但如果我們不喜歡默認(rèn)的尺寸，我們必須給它們我們想要的尺寸。

我們使用xs,sm,lg,5x, 和10x 等類。這些類將圖標(biāo)的大小增加和減少到我們想要的程度。

動(dòng)畫(huà)化Font Awesome圖標(biāo)

讓我們也來(lái)看看我們?nèi)绾卧诓皇褂肁ngular中的CSS或動(dòng)畫(huà)庫(kù)的情況下對(duì)Font Awesome圖標(biāo)進(jìn)行動(dòng)畫(huà)。

作為一個(gè)開(kāi)發(fā)者，當(dāng)用戶點(diǎn)擊一個(gè)提交按鈕或頁(yè)面正在加載時(shí)，我們可能想顯示一個(gè)加載器或旋轉(zhuǎn)器的效果，告訴用戶有東西正在加載。

我們可以使用Font Awesome圖標(biāo)來(lái)達(dá)到這個(gè)目的。我們不需要導(dǎo)入一個(gè)外部的CSS動(dòng)畫(huà)庫(kù)，而只需要在圖標(biāo)標(biāo)簽上添加Font Awesomespin 屬性。

這樣做可以避免我們下載一個(gè)完整的CSS動(dòng)畫(huà)庫(kù)，而最終使用一個(gè)旋轉(zhuǎn)的效果或使用關(guān)鍵幀編寫(xiě)一個(gè)長(zhǎng)的CSS動(dòng)畫(huà)。

因此，讓我們來(lái)看看我們?nèi)绾瓮ㄟ^(guò)使用React圖標(biāo)來(lái)實(shí)現(xiàn)這一點(diǎn)。

我們剛剛導(dǎo)入了React圖標(biāo)，現(xiàn)在我們要對(duì)它進(jìn)行動(dòng)畫(huà)處理。在React圖標(biāo)組件上，添加Font Awesomespin loader屬性。

當(dāng)我們加載網(wǎng)頁(yè)時(shí)，我們會(huì)看到React圖標(biāo)在無(wú)限地旋轉(zhuǎn)。這是因?yàn)槲覀儼?code>spin 屬性設(shè)置為true 。

看完上述內(nèi)容，你們對(duì)Angular中怎么添加和使用Font Awesome有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。