如何以Angular的姿勢(shì)打開(kāi)Font-Awesome詳解
前言
本文主要給大家介紹了關(guān)于以Angular的姿勢(shì)打開(kāi)Font-Awesome的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
環(huán)境
- Angular: v5.2.9
- Font-Awesome: v5.0.10
- angular-fontawesome: v0.1.0-9
無(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)。寫(xiě)此文時(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({...
這樣你就可以在 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 模板中的寫(xiě)法
之前的方式：
<fa-icon [icon]="coffee"></fa-icon> // or <fa-icon icon="coffee"></fa-icon>
其實(shí)是一種簡(jiǎn)便寫(xiě)法。它默認(rèn)使用了 fas 樣式的圖標(biāo)，如果要 far 或 fab，你需要這樣寫(xiě)：
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
將樣式包別稱作為前綴填入數(shù)組第一個(gè)元素。我推薦這種精確的寫(xiě)法。
圖標(biāo)基本特效
Font-Awesome 還有很多很棒的圖標(biāo)特效——可以通過(guò) 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à)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
AngularJS實(shí)現(xiàn)路由實(shí)例
本文給大家分享的是使用angularjs路由框架實(shí)現(xiàn)的一個(gè)簡(jiǎn)單頁(yè)面跳轉(zhuǎn)功能，非常的實(shí)用，也很詳細(xì)，有需要的小伙伴可以參考下2017-02-02
詳解angularjs 學(xué)習(xí)之 scope作用域
本篇文章主要介紹了詳解angularjs 學(xué)習(xí)之 scope作用域，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
關(guān)于AngularJS中ng-repeat不更新視圖的解決方法
今天小編就為大家分享一篇關(guān)于AngularJS中ng-repeat不更新視圖的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
angular4 獲取wifi列表中文顯示亂碼問(wèn)題的解決
這篇文章主要介紹了angular4 獲取wifi列表中文顯示亂碼問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法
這篇文章主要介紹了angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
探索angularjs+requirejs全面實(shí)現(xiàn)按需加載的套路
這篇文章主要探索了angularjs+requirejs全面實(shí)現(xiàn)按需加載的套路，圍繞angularjs提供的各種機(jī)制進(jìn)行研究，感興趣的小伙伴們可以參考一下2016-02-02
激動(dòng)人心的 Angular HttpClient的源碼解析
這篇文章主要介紹了Angular HttpClient的源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法【路由嵌套】
這篇文章主要介紹了AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法,涉及AngularJS路由嵌套操作相關(guān)實(shí)現(xiàn)步驟與技巧,需要的朋友可以參考下2016-12-12
Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目如何升級(jí)至Angular6的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09