Angular中怎么添加和使用Font Awesome

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

Font Awesome

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

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

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

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

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

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

在你運行該命令之前，確保你的系統(tǒng)已經安裝了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有兩個步驟。我們來看看這兩點。

1. 如何在組件層面上使用Font Awesome圖標

2. 如何使用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';復制代碼

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

faCoffee = faCoffee;

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

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

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

ng serve

如果我們看一下我們的網頁，我們會看到faCoffee 顯示在屏幕上。這表明圖標已經安裝并成功導入。

如何使用Font Awesome圖標庫

這是我們在應用程序中使用Font Awesome的最佳方法，特別是當我們想在所有組件中使用它，而不需要重新導入圖標或多次導入一個圖標時。讓我們來看看我們如何實現(xiàn)這個目標。

打開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>

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

Font Awesome中的圖標樣式

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

• 實體圖標使用前綴'fas' ，并從以下網站導入：@fortawesome/free-regular-svg-icons

• 普通圖標使用前綴'far' ，并從以下網站導入@fortawesome/free-solid-svg-icons

• 品牌圖標使用前綴'fab' ，并從以下網站導入。@fortawesome/free-brands-svg-icons

接下來，讓我們看看我們還能用Font Awesome圖標做什么。

不用寫CSS樣式就能改變圖標的顏色和大小

讓我們來看看我們如何在Angular中不寫CSS樣式就能改變Font Awesome圖標的顏色。

這種方法有助于我們在組件層面上使用圖標。然而，當在所有的組件中使用這種方法時，它是沒有幫助的，因為它將改變我們項目中所有組件的圖標顏色。對于多個組件，我們可以只用一個CSS類或樣式屬性來改變它一次。

但是，當我們在一個組件層面上工作時，我們可以使用它，因為我們將只在該組件中使用該圖標，而不是為它創(chuàng)建一個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>

當使用內聯(lián)造型改變圖標顏色和筆畫時，我們必須利用fa-icon 屬性。

接下來，我們要在Angular中使用內聯(liá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>

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

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

動畫化Font Awesome圖標

讓我們也來看看我們如何在不使用Angular中的CSS或動畫庫的情況下對Font Awesome圖標進行動畫。

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

我們可以使用Font Awesome圖標來達到這個目的。我們不需要導入一個外部的CSS動畫庫，而只需要在圖標標簽上添加Font Awesomespin 屬性。

這樣做可以避免我們下載一個完整的CSS動畫庫，而最終使用一個旋轉的效果或使用關鍵幀編寫一個長的CSS動畫。

因此，讓我們來看看我們如何通過使用React圖標來實現(xiàn)這一點。

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

我們剛剛導入了React圖標，現(xiàn)在我們要對它進行動畫處理。在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有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業(yè)資訊頻道，感謝大家的支持。