Font Awesome 5 頁面引入的幾種方式和應用

2021年2月21日前端 applek

在做網頁開發中,前端頁面顯示時經常會用到字體庫圖標,如 iconfont, fontawesome, glyphicons, lonicons等

其中最著名的就是fontawesome了，現在版本已經更新到了5.x

一.fontawesome本質原理

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

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

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

html頁面:

<!-- 引入字體圖標 -->
<div class="icon">&#xf26e</div>

icon樣式:

.icon {
    font-family: FontAwesome;
}

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

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

fontawesome5引入方式

1.基于SVG格式,使用JS調用圖標

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

若想引入所有圖標:

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

若只需要引入solid系的圖標:

<script src="solid.min.js"></script>
<!-- 在調用solid,brand,regular系js時都要調用的文件 -->
<script src="fontawesome.min.js"></script>

使用js方式調用的圖標，最終在DOM中會以svg代碼顯示圖標。

2.基于網頁字體,使用CSS調用圖標

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

若引入所有圖標:

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

若只想引入brand的圖標:

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

使用css方式調用圖標，以網頁字體的方式顯示，則dom結構內沒有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圖標開始支持svg,svg有更好的表現能力.在標簽上喜歡用<i>?來引用.在html頁面中起到強調或斜體的文本效果一般會使用<em></em>標簽,在語義上也可以使用<span>?標簽.

引用一個圖標需要指導這兩點信息:?1.以fa-為前綴的名稱. 2.要使用相應的前綴樣式.?注意:?fa?前綴在5.x版本中已棄用.新的默認設置是實心的fas樣式和品牌的fab樣式.

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

1.圖標尺寸與顏色

fa圖標會自動繼承css大小和顏色:

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

支持調整大小

<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.圖標寬度及列表圖標

也可以在引用圖標的html元素上添加**fa-fw類?,將一個或多個圖標設置為相同的固定寬度**.在列表或導航菜單中圖標對齊非常有用.

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

列表中的圖標: 在固定寬度的垂直對齊基礎上添加了一些實用樣式.使用?fa-ul?和?fa-li?替換無序列表的默認項目符號.

<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.圖標旋轉與鏡像

引用圖標使用?fa-rotate-*?和?fa-flip-*類來實現旋轉和翻轉圖標.

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.圖標動畫

使用fa-spin?類使任何圖標旋轉，或者使用fa-pulse使其進行8方向旋轉。特別適用于fa-spinner和旋轉圖標類別中的所有內容。

<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.圖標堆疊

要堆疊多個圖標，請在要堆疊的2個圖標的父HTML元素上使用fa-stack?類。然后為常規尺寸的圖標添加fa-stack-1x?類，為較大的圖標添加fa-stack-2x?類。?fa-inverse?可以與fa-stack-1x一起添加到圖標中，以幫助實現剔除效果。

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