Font Awesome 5 頁面引入的幾種方式和應(yīng)用

2021-2-21

在做網(wǎng)頁開發(fā)中,前端頁面顯示時(shí)經(jīng)常會用到字體庫圖標(biāo),如 iconfont, fontawesome, glyphicons, lonicons等

其中最著名的就是fontawesome了，現(xiàn)在版本已經(jīng)更新到了5.x

一.fontawesome本質(zhì)原理

fontawesome本質(zhì)上是把圖標(biāo)做成了字體文件,一個(gè)圖標(biāo)代表一個(gè)特殊符號,需要某個(gè)圖標(biāo)時(shí)也可引用這個(gè)字體文件(css文件).如:

.fa-500px:before {
  content: "\f26e"; 
}

.fa-accusoft:before {
  content: "\f369"; 
}

html頁面:

<!-- 引入字體圖標(biāo) -->
<div class="icon">&#xf26e</div>

icon樣式:

.icon {
    font-family: FontAwesome;
}

二.fontawesome5的引入方式及與4.x的變化

圖表樣式: 增加了3中不同的圖標(biāo)樣式,對于要使用的圖標(biāo)需要指定圖標(biāo)的名稱及對應(yīng)的前綴?.增加了 fas, fab, fal等.
線框圖標(biāo): 所有具有線框樣式(通常以-o結(jié)尾)的圖標(biāo)現(xiàn)在都有一個(gè)far前綴,并刪除了它們的-o后綴.
圖標(biāo)名稱變更: 刪除了別名,每個(gè)圖標(biāo)都只有一個(gè)正式名稱.

fontawesome5引入方式

1.基于SVG格式,使用JS調(diào)用圖標(biāo)

壓縮包中含有v4-shims.js文件。這個(gè)是為了兼容4.x版本的升級使用。如果已有4.x版本的項(xiàng)目，想更換成svg圖標(biāo)，那么需要額外調(diào)用v4-shims.js或v4-shims.min.js文件。以保證兼容性。

若想引入所有圖標(biāo):

<script src="all.js"></script>

若只需要引入solid系的圖標(biāo):

<script src="solid.min.js"></script>
<!-- 在調(diào)用solid,brand,regular系js時(shí)都要調(diào)用的文件 -->
<script src="fontawesome.min.js"></script>

使用js方式調(diào)用的圖標(biāo)，最終在DOM中會以svg代碼顯示圖標(biāo)。

2.基于網(wǎng)頁字體,使用CSS調(diào)用圖標(biāo)

CSS方法要調(diào)用兩組文件,一個(gè)是css(或less或scss)樣式表, 另一組是圖標(biāo)字體文件.即 css方法調(diào)用時(shí),實(shí)際上要用到的是css文件夾及webfonts文件夾里的文件.

若引入所有圖標(biāo):

<link rel="stylesheet" href="all.css">

若只想引入brand的圖標(biāo):

<link rel="stylesheet" href="brands.min.css">
<!-- 在調(diào)用solid,brand,regular系css時(shí)都要調(diào)用的文件 -->
<link rel="stylesheet" href="fontawesome.min.css">

使用css方式調(diào)用圖標(biāo)，以網(wǎng)頁字體的方式顯示，則dom結(jié)構(gòu)內(nèi)沒有svg代碼。

3.使用CDN

<!-- Web字體 + CSS -->
<head>
  <link rel="stylesheet" >
  <link rel="stylesheet" >
</head>

<!-- SVG + JS框架 -->
<head>
  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/v4-shims.js"></script>
</head>

三.fontawesome5怎么使用

fa5圖標(biāo)開始支持svg,svg有更好的表現(xiàn)能力.在標(biāo)簽上喜歡用<i>?來引用.在html頁面中起到強(qiáng)調(diào)或斜體的文本效果一般會使用<em></em>標(biāo)簽,在語義上也可以使用<span>?標(biāo)簽.

引用一個(gè)圖標(biāo)需要指導(dǎo)這兩點(diǎn)信息:?1.以fa-為前綴的名稱. 2.要使用相應(yīng)的前綴樣式.?注意:?fa?前綴在5.x版本中已棄用.新的默認(rèn)設(shè)置是實(shí)心的fas樣式和品牌的fab樣式.

Style	Availability	Style Prefix	Example	Web Font Filename	SVG+JS Filename
實(shí)心	免費(fèi)	fas	`<i class="fas fa-camera"></i>`	fa-solid-900.*	solid.js
品牌	免費(fèi)	fab	`<i class="fab fa-500px"></i>`	fa-brands-400.*	brands.js
細(xì)體	僅專業(yè)版	fal	`<i class="fal fa-camera"></i>`	fa-light-300.*	light.js
常規(guī)	僅專業(yè)版	far	`<i class="far fa-camera-retro"></i>`	fa-regular-400.*	regular.js
雙色	僅專業(yè)版	fad	`<i class="fad fa-camera"></i>`	900

1.圖標(biāo)尺寸與顏色

fa圖標(biāo)會自動(dòng)繼承css大小和顏色:

<span style="font-size: 48px; color: Dodgerblue;">
  	<i class="fas fa-camera"></i>
</span>

支持調(diào)整大小

<div style="font-size: 24px;">
    <i class="fas fa-camera fa-xs"></i>
    <i class="fas fa-camera fa-sm"></i>
    <i class="fas fa-camera fa-lg"></i>
    <i class="fas fa-camera fa-2x"></i>
    <i class="fas fa-camera fa-3x"></i>
    <i class="fas fa-camera fa-5x"></i>
    <i class="fas fa-camera fa-7x"></i>
    <i class="fas fa-camera fa-10x"></i>
</div>

2.圖標(biāo)寬度及列表圖標(biāo)

也可以在引用圖標(biāo)的html元素上添加**fa-fw類?,將一個(gè)或多個(gè)圖標(biāo)設(shè)置為相同的固定寬度**.在列表或?qū)Ш讲藛沃袌D標(biāo)對齊非常有用.

<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>

列表中的圖標(biāo): 在固定寬度的垂直對齊基礎(chǔ)上添加了一些實(shí)用樣式.使用?fa-ul?和?fa-li?替換無序列表的默認(rèn)項(xiàng)目符號.

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

3.圖標(biāo)旋轉(zhuǎn)與鏡像

引用圖標(biāo)使用?fa-rotate-*?和?fa-flip-*類來實(shí)現(xiàn)旋轉(zhuǎn)和翻轉(zhuǎn)圖標(biāo).

fa-rotate-90 : 90度
fa-rotate-180 : 180度
fa-rotate-279 : 270度
fa-flip-horizontal : mirrors icon horizontally
fa-flip-vertical : mirrors icon vertically
fa-flip-both : mirrors icon vertically and horizontally (requires 5.7.0 or greater)

4.圖標(biāo)動(dòng)畫

使用fa-spin?類使任何圖標(biāo)旋轉(zhuǎn)，或者使用fa-pulse使其進(jìn)行8方向旋轉(zhuǎn)。特別適用于fa-spinner和旋轉(zhuǎn)圖標(biāo)類別中的所有內(nèi)容。

<div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-circle-notch fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-cog fa-spin"></i>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-stroopwafel fa-spin"></i>
</div>

5.圖標(biāo)堆疊

要堆疊多個(gè)圖標(biāo)，請?jiān)谝询B的2個(gè)圖標(biāo)的父HTML元素上使用fa-stack?類。然后為常規(guī)尺寸的圖標(biāo)添加fa-stack-1x?類，為較大的圖標(biāo)添加fa-stack-2x?類。?fa-inverse?可以與fa-stack-1x一起添加到圖標(biāo)中，以幫助實(shí)現(xiàn)剔除效果。

<i class="far fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  	<i class="far fa-circle fa-stack-2x"></i>
  	<i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  	<i class="fas fa-circle fa-stack-2x"></i>
  	<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>