如何以Angular的姿勢(shì)打開Font-Awesome詳解
前言
本文主要給大家介紹了關(guān)于以Angular的姿勢(shì)打開Font-Awesome的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。
環(huán)境
- Angular: v5.2.9
- Font-Awesome: v5.0.10
- angular-fontawesome: v0.1.0-9
無須再用傳統(tǒng)的 Web Font 方式
以前習(xí)慣于 Font-Awesome 的傳統(tǒng)方式：頁(yè)面底部引用一個(gè) font-awesome.min.css 文件，然后在頁(yè)面中使用 <i class="fa xxx"></i> 放置圖標(biāo)——這在 Angular 里依然可行，不過這并不 Angularish ——我們其實(shí)可以用 Angular 模塊組件那種方式去實(shí)現(xiàn)。寫此文時(shí)，官網(wǎng)還沒有正式上線 Package for Angular, 不過在官方 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)入后便無須在其他組件中重復(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({...
這樣你就可以在 html 模板中直接使用了。
全套導(dǎo)入
對(duì)于一般規(guī)模的網(wǎng)站，我還是推薦將圖標(biāo)全部導(dǎo)入，想用什么就用什么，比查找名字一個(gè)一個(gè)導(dǎo)入方便。全套導(dǎo)入的方式就是用圖標(biāo)包的別稱代替圖標(biāo)名：
// Single:
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
// All:
import { fas } from '@fortawesome/free-solid-svg-icons';
其中「fas」的「s」代表的是「free-solid-svg-icons」的「solid」。以此類推，其他樣式的導(dǎo)入是：
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
然后在 library 中添加即可：
library.add(fas); // or library.add(fas, far);
添加之后，你就可以在 html 中任意使用圖標(biāo)了。
在 html 模板中的寫法
之前的方式：
<fa-icon [icon]="coffee"></fa-icon> // or <fa-icon icon="coffee"></fa-icon>
其實(shí)是一種簡(jiǎn)便寫法。它默認(rèn)使用了 fas 樣式的圖標(biāo)，如果要 far 或 fab，你需要這樣寫：
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
將樣式包別稱作為前綴填入數(shù)組第一個(gè)元素。我推薦這種精確的寫法。
圖標(biāo)基本特效
Font-Awesome 還有很多很棒的圖標(biāo)特效——可以通過 html 的標(biāo)簽屬性實(shí)現(xiàn)。這里直接復(fù)制文檔中一些基礎(chǔ)的用法：
旋轉(zhuǎn)與脈搏式轉(zhuǎn)動(dòng):
<fa-icon [icon]="['fas', 'spinner']" [spin]="true"></fa-icon> <fa-icon [icon]="['fas', 'spinner']" [pulse]="true"></fa-icon>
固定寬度：
<fa-icon [icon]="['fas', 'coffee']" [fixedWidth]="true"></fa-icon>
邊框:
<fa-icon [icon]="['fas', 'coffee']" [border]="true"></fa-icon>
翻轉(zhuǎn):
<fa-icon [icon]="['fas', 'coffee']" flip="horizontal"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" flip="vertical"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" flip="both"></fa-icon>
尺寸:
<fa-icon [icon]="['fas', 'coffee']" size="xs"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" size="lg"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>
按角度偏轉(zhuǎn):
<fa-icon [icon]="['fas', 'coffee']" rotate="90"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" rotate="180"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" rotate="270"></fa-icon>
靠左或靠右排列:
<fa-icon [icon]="['fas', 'coffee']" pull="left"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" pull="right"></fa-icon>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Angular5中狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Angular5中狀態(tài)管理的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐
本篇文章主要介紹了Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
AngularJS輕松實(shí)現(xiàn)雙擊排序的功能
網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了，那么這篇文章我們一起來看一個(gè)AngularJS雙擊排序的例子，對(duì)大家日常開發(fā)很有幫助的，有需要的可以參考借鑒。2016-08-08
依賴注入(DI -- Dependency Injection)是一種重要的應(yīng)用設(shè)計(jì)模式。Angular里面也有自己的DI框架，在設(shè)計(jì)應(yīng)用時(shí)經(jīng)常會(huì)用到它，它可以我們的開發(fā)效率和模塊化程度。 Angular系統(tǒng)中通過在類上添加@Injectable裝飾器來告訴系統(tǒng)這個(gè)類(服務(wù))是可注入的。2021-05-05
Angular項(xiàng)目從新建、打包到nginx部署全過程記錄
一直比較喜歡angular，正巧最近有個(gè)項(xiàng)目用到了，所以想和大家來分享下，下面這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目從新建、打包到nginx部署的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
Angular利用內(nèi)容投射向組件輸入ngForOf模板的方法
本篇文章主要介紹了Angular利用內(nèi)容投射向組件輸入ngForOf模板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁(yè)Web應(yīng)用。這篇文章主要介紹了詳解angular中如何監(jiān)控dom渲染完畢，有興趣的可以了解一下。2017-01-01
這篇文章給大家介紹了angularjs中controller的三種寫法，每種寫法都給出了示例代碼，對(duì)大家理解和學(xué)習(xí)很有幫助，有需要的朋友們可以參考借鑒。2016-09-09
激動(dòng)人心的 Angular HttpClient的源碼解析
這篇文章主要介紹了Angular HttpClient的源碼解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07