前言

本文主要給大家介紹了關(guān)于以Angular的姿勢(shì)打開(kāi)Font-Awesome的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

環(huán)境

無(wú)須再用傳統(tǒng)的 Web Font 方式

　　以前習(xí)慣于 Font-Awesome 的傳統(tǒng)方式：頁(yè)面底部引用一個(gè) font-awesome.min.css 文件，然后在頁(yè)面中使用 <i class="fa xxx"></i> 放置圖標(biāo)——這在 Angular 里依然可行，不過(guò)這并不 Angularish ——我們其實(shí)可以用 Angular 模塊組件那種方式去實(shí)現(xiàn)。寫此文時(shí)，官網(wǎng)還沒(méi)有正式上線 Package for Angular, 不過(guò)在官方 GitHub 上已經(jīng)有相關(guān)文檔教程了，本文以下內(nèi)容基本遵循該官方文檔。

安裝 Package

　　npm 方式：

$ npm install @fortawesome/fontawesome-svg-core --save$ npm install @fortawesome/free-solid-svg-icons --save$ npm install @fortawesome/angular-fontawesome --save

其中「free-solid-svg-icons」是經(jīng)典樣式，其他還有「regular」和「light」可選：

$ npm install @fortawesome/free-brands-svg-icons --save$ npm install @fortawesome/free-regular-svg-icons --save

在 app.module.ts 中導(dǎo)入基本模塊

// ...import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';@NgModule({ // ... imports: [ // ... FontAwesomeModule ], // ...})// ...

　　導(dǎo)入后便無(wú)須在其他組件中重復(fù)導(dǎo)入了。這是以下使用圖標(biāo)方式的基礎(chǔ)。

按需使用方式一

　　在 component 里導(dǎo)入你所需要的圖標(biāo)：

// ...import { faCoffee } from '@fortawesome/free-solid-svg-icons';//...export class AppComponent { //... myIcon = faCoffee;}

注意：這里導(dǎo)入的圖標(biāo)名字要加 fa 前綴，并使用 camelCase 命名法。導(dǎo)入后，你便可以在 html 模板中用以下方式使用圖標(biāo)：

<fa-icon [icon]="myIcon"></fa-icon>

注意在 html 模板中要直接使用圖標(biāo)名。圖標(biāo)可在官網(wǎng)圖標(biāo)庫(kù)查詢。

按需使用方式二

　　第二種按需使用的方式是使用 library, 使用 library 后你就不用再在 component 中導(dǎo)入圖標(biāo)了，一切都在 app.module.ts 中完成：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';import { library } from '@fortawesome/fontawesome-svg-core';

有了 library 后，接著再添加你需要用的圖標(biāo)：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';import { library } from '@fortawesome/fontawesome-svg-core';import { faCoffee } from '@fortawesome/free-solid-svg-icons';

然后把圖標(biāo)加入到 library 里：

// import ...library.add(faCoffee);// NgModule({...