在做網頁開發中,前端頁面顯示時經常會用到字體庫圖標,如 iconfont, fontawesome, glyphicons, lonicons等.下面是各字體圖標的網站:
這篇文章主要介紹fontawesome5的使用及與fontawesome4的變化.
一.fontawesome本質原理
fontawesome本質上是把圖標做成了字體文件,一個圖標代表一個特殊符號,需要某個圖標時也可引用這個字體文件(css文件).如:
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
content: "\f26e"; }
content: "\f368"; }
.fa-accusoft:before {
content: "\f369"; }
html頁面:
<!-- 引入字體圖標 -->
<div class="icon"></div>
icon樣式:
.icon {
font-family: FontAwesome;
}
上文代碼只是說明fontawesom的字體原理,並不代表實際引入方法.
二.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" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
</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>
web字體+css 和 svg+js框架都包含一些基本控件,可以調整圖標的大小.下面是相對父容器的尺寸:
<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>
使圖標在旋轉或搏動時保持完美居中時,web字體+css存在普遍問題.可以這樣解決:
- 切換框架-切換到帶有JavaScript版本的SVG
- 設置動畫圖標的顯示-使用 display: block;
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>