本篇文章給大家介紹一下什么是Font Awesome，以及Angular項(xiàng)目中添加Font Awesome，使用Font Awesome圖標(biāo)庫的方法，希望對(duì)大家有所助。

在這篇文章中，我們將研究如何在Angular應(yīng)用程序中使用Font Awesome，以及如何使用Font Awesome的圖標(biāo)動(dòng)畫和樣式設(shè)計(jì)。【相關(guān)教程推薦：《angular教程》】

在我們進(jìn)一步討論之前，讓我們先談?wù)凢ont Awesome是什么。

Font Awesome

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

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

但是Angular 5的發(fā)布，通過為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)畫、著色和尺寸。

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

讓我們?yōu)楸窘坛虅?chuàng)建一個(gè)演示的Angular應(yīng)用程序。打開你的終端，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)目的人，我們可以從這里開始跟進(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è)步驟。我們來看看這兩點(diǎn)。

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

如何在組件層面上使用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后，打開app.module.ts ，導(dǎo)入FontAwesomeModule ，就像下面這樣。

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

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

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

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

faCoffee = faCoffee;

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

<div>     <fa-icon [icon]="faCoffee"></fa-icon> </div>

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

ng serve

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

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

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

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

<div>     <fa-icon [icon]="['fas', 'star']"></fa-icon>     <fa-icon [icon]="['far', 'star']"></fa-icon> </div>

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

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

Font Awesome有四種不同的風(fēng)格，我們來看看免費(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

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

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

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

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

但是，當(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 <fa-icon [icon]="['fab', 'angular']" ></fa-icon>  // to red <fa-icon       [icon]="['fab', 'angular']"       [styles]="{ stroke: 'red', color: 'red' }" ></fa-icon>

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

接下來，我們要在Angular中使用內(nèi)聯(lián)樣式將圖標(biāo)的大小從小到大。要做到這一點(diǎn)，我們必須使用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>

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

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

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

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

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

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

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

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

<fa-icon       [icon]="['fab', 'react']"       [styles]="{ stroke: 'blue', color: 'blue' }"       size="10x" ></fa-icon>

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

<fa-icon       [icon]="['fab', 'react']"       [styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"       size="10x"       [spin]="true" ></fa-icon>

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

總結(jié)

在這篇文章中，我們能夠看到如何在Angular項(xiàng)目中使用Font Awesome圖標(biāo)，如何添加圖標(biāo)庫中的一些基本樣式，以及如何對(duì)圖標(biāo)進(jìn)行動(dòng)畫處理。

我們還可以用Font Awesome圖標(biāo)做