2020-2-1 seo達人
一、什么是字體圖標
字體圖標：簡單的說，就是一種特殊的字體，通過這種字體，顯示給用戶的就像一個個圖片一樣，但它的本質是文字。目前在移動端應用比較廣泛！
二、字體圖標的使用步驟
這里以阿里巴巴矢量圖標庫為例！?。?br />
sep1：
百度搜索iconfont,找到阿里巴巴矢量圖標庫官網
網址在這里https://www.iconfont.cn/
進去之后注冊或登錄，共有3種登錄方式，在這里我使用新浪微博賬號登錄
好了，登錄之后我們就可以在里面選擇自己想要的字體圖標啦?。?！那么，如何選擇下載并應用到自己的項目中呢？？別著急，跟著我走！
sep2：下載字體圖標字體庫
在這里我們可以根據自己的需求輸入相應的關鍵字進行搜索（中英文都可以）
鼠標放上去，然后就可以把自己喜歡的寶貝加入購物車啦！
網購的趕腳有木有，
我知道，看到這里大家就該有疑問了，
還要花錢買嗎？
放心！
答案是：不需要！
我們選的東西都在購物車里啦！
打開購物車，就能看到你選的圖標了??！
接下來你要做的是把它們下載到本地。
由于要在網頁中使用
在這里我們選擇 下載代碼
下載后將壓縮包解壓，為了方便后續使用我們改一下文件夾名稱，在這里我改為 icon (注意：在HTML中導入路徑時，記得帶上你所改的文件夾名稱)
打開之后你會發現里面有不同類型的文件（建議都不要刪除）
打開后綴名為.html的這個文件（可以更直觀地查看自己下載的字體圖標）
step3：在項目中引用字體圖標
不要走開，重點來了！??！
官方提供了三種引用方法（下面對應的都有步驟）
Unicode 引用
Unicode 是字體在網頁端最原始的應用方式，特點是：
兼容性最好，支持 IE6+，及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式
Unicode 使用步驟如下
第一步：拷貝項目下面生成的 @font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步：定義使用 iconfont 的樣式
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
第三步：挑選相應圖標并獲取字體編碼，應用于頁面
<span class="iconfont">3</span>
font-class 引用
font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。
與 Unicode 使用方式相比，具有如下特點：
兼容性良好，支持 IE8+，及所有現代瀏覽器。
相比于 Unicode 語意明確，書寫更直觀。可以很容易分辨這個 icon 是什么。
因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。
不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑選相應圖標并獲取類名，應用于頁面：
<span class="iconfont icon-xxx"></span>
symbol 引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
支持多色圖標了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過 font-size, color 來調整樣式。
兼容性較差，支持 IE9+，及現代瀏覽器。
瀏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下:
第一步：引入項目下面生成的 symbol 代碼：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代碼（引入一次就行）：
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步：挑選相應圖標并獲取類名，應用于頁面：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
下面，我就跟大家詳細說說 font-class 引用的引用方式：
打開編輯器（在這里我使用的是 VS Code編輯器），新建一個項目文件夾(demo)
將解壓后的字體圖標文件夾（icon）直接放到demo目錄下
在demo文件夾下面新建一個html文件 demo.html
導入icon文件夾里面的外部樣式表
<link rel="stylesheet" href="./icon/iconfont.css">
iconfont.css 里面就是我們下載的字體圖標的所有css樣式了，我們打開看看吧！
你會發現里面有一個 iconfont類名（這里劃重點！后面要用），它是所有字體圖標的公用樣式。
這時我們就可以在頁面中使用這些字體圖標啦！上面我們只是導入了整個css樣式表，現在我們要針對性地把某個圖標引用到html頁面中，并在網頁中顯示出來。
下面 我們就開始寫頁面的主體部分吧！
<p> 我有一個夢想：能夠擁有一套 <span class="iconfont icon-home"></span> </p>
這里的span標簽里面放的就是要用的某個字體圖標了，你會發現它用了兩個class類名。
第一個是iconfont，也就是我前面劃的重點（到這里不明白的話，可以再回頭看看）
第二個是icon-home，這個類名從何而來呢？
來，繼續往下看，再次打開icon文件夾下的
話不多說，直接看圖
是不是對應上啦！簡單地說就是你要用那個圖標就添加它的class類名。
到這里，恭喜你已經學會了如何在網頁中插入字體圖標啦！?。?br />
那么，趕快運行一下看看效果吧！
到這里是不是還滿足不了你的需求，會有這樣的疑問：如果是這樣的效果，跟一張圖片有什么區別呢？？？
當然不是啦！
之所以叫做字體圖標，顧名思義，它在網頁中就是一種字體的存在，不過它比普通字體長得好看些有木有！
我們可以像更改文字樣式一樣去更改它的樣式，比如說 大小、顏色、陰影…
Symbol 引用方式還可以實現下面原圖標的彩色效果哦！可以自己照著官方提供的步驟試試看
下面附上Font class引用方法的 源代碼 供參考
前面的步驟一定要看！！！
如果前期工作沒做的話，直接用我的源代碼是實現不了的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字體圖標</title>
<link rel="stylesheet" href="./icon/iconfont.css">
<style>
.iconfont{
font-size: 200px;
color: palevioletred;
text-shadow: 18px 17px 17px gray;
}
</style>
</head>
<body>
<p>
我有一個夢想：能夠擁有一套
<span class="iconfont icon-home"></span>
</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
花費了很長時間整理出來的。
很簡單是不是！??！
看到這里還不會的話，建議重新再看一遍！
其中有錯誤的話，還請指出，我會虛心接受并改正?。。?br />
————————————————
版權聲明：本文為CSDN博主「Humy.」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42678796/article/details/104569773