一、什么是字體圖標(biāo)

字體圖標(biāo)：簡(jiǎn)單的說(shuō)，就是一種特殊的字體，通過(guò)這種字體，顯示給用戶的就像一個(gè)個(gè)圖片一樣，但它的本質(zhì)是文字。目前在移動(dòng)端應(yīng)用比較廣泛！







二、字體圖標(biāo)的使用步驟

這里以阿里巴巴矢量圖標(biāo)庫(kù)為例！！！



sep1：

百度搜索iconfont,找到阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)



網(wǎng)址在這里https://www.iconfont.cn/

進(jìn)去之后注冊(cè)或登錄，共有3種登錄方式，在這里我使用新浪微博賬號(hào)登錄





好了，登錄之后我們就可以在里面選擇自己想要的字體圖標(biāo)啦！！！那么，如何選擇下載并應(yīng)用到自己的項(xiàng)目中呢？？別著急，跟著我走！



sep2：下載字體圖標(biāo)字體庫(kù)

在這里我們可以根據(jù)自己的需求輸入相應(yīng)的關(guān)鍵字進(jìn)行搜索（中英文都可以）



鼠標(biāo)放上去，然后就可以把自己喜歡的寶貝加入購(gòu)物車?yán)玻?br />


網(wǎng)購(gòu)的趕腳有木有，

我知道，看到這里大家就該有疑問(wèn)了，

還要花錢買嗎？

放心！

答案是：不需要！



我們選的東西都在購(gòu)物車?yán)锢玻?br />


打開購(gòu)物車，就能看到你選的圖標(biāo)了！！

接下來(lái)你要做的是把它們下載到本地。



由于要在網(wǎng)頁(yè)中使用

在這里我們選擇 下載代碼



下載后將壓縮包解壓，為了方便后續(xù)使用我們改一下文件夾名稱，在這里我改為 icon (注意：在HTML中導(dǎo)入路徑時(shí)，記得帶上你所改的文件夾名稱)



打開之后你會(huì)發(fā)現(xiàn)里面有不同類型的文件（建議都不要?jiǎng)h除）



打開后綴名為.html的這個(gè)文件（可以更直觀地查看自己下載的字體圖標(biāo)）







step3：在項(xiàng)目中引用字體圖標(biāo)

不要走開，重點(diǎn)來(lái)了！！！

官方提供了三種引用方法（下面對(duì)應(yīng)的都有步驟）





Unicode 引用

Unicode 是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式，特點(diǎn)是：

兼容性最好，支持 IE6+，及所有現(xiàn)代瀏覽器。

支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。

但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。

注意：新版 iconfont 支持多色圖標(biāo)，這些多色圖標(biāo)在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式

Unicode 使用步驟如下

第一步：拷貝項(xiàng)目下面生成的 @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; }

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面

<span class="iconfont">&#x33;</span>



font-class 引用

font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語(yǔ)意不明確的問(wèn)題。

與 Unicode 使用方式相比，具有如下特點(diǎn)：

兼容性良好，支持 IE8+，及所有現(xiàn)代瀏覽器。

相比于 Unicode 語(yǔ)意明確，書寫更直觀。可以很容易分辨這個(gè) icon 是什么。

因?yàn)槭褂?class 來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改 class 里面的 Unicode 引用。

不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

使用步驟如下：

第一步：引入項(xiàng)目下面生成的 fontclass 代碼：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

<span class="iconfont icon-xxx"></span>



symbol 引用

這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè) SVG 的集合，與另外兩種相比具有如下特點(diǎn)：

支持多色圖標(biāo)了，不再受單色限制。

通過(guò)一些技巧，支持像字體那樣，通過(guò) font-size, color 來(lái)調(diào)整樣式。

兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。

瀏覽器渲染 SVG 的性能一般，還不如 png。

使用步驟如下:

第一步：引入項(xiàng)目下面生成的 symbol 代碼：

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

第二步：加入通用 CSS 代碼（引入一次就行）：

<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>



下面，我就跟大家詳細(xì)說(shuō)說(shuō) font-class 引用的引用方式：



打開編輯器（在這里我使用的是 VS Code編輯器），新建一個(gè)項(xiàng)目文件夾(demo)





將解壓后的字體圖標(biāo)文件夾（icon）直接放到demo目錄下





在demo文件夾下面新建一個(gè)html文件 demo.html



導(dǎo)入icon文件夾里面的外部樣式表

<link rel="stylesheet" href="./icon/iconfont.css">



iconfont.css 里面就是我們下載的字體圖標(biāo)的所有css樣式了，我們打開看看吧！

你會(huì)發(fā)現(xiàn)里面有一個(gè) iconfont類名（這里劃重點(diǎn)！后面要用），它是所有字體圖標(biāo)的公用樣式。





這時(shí)我們就可以在頁(yè)面中使用這些字體圖標(biāo)啦！上面我們只是導(dǎo)入了整個(gè)css樣式表，現(xiàn)在我們要針對(duì)性地把某個(gè)圖標(biāo)引用到html頁(yè)面中，并在網(wǎng)頁(yè)中顯示出來(lái)。

下面 我們就開始寫頁(yè)面的主體部分吧！



<p> 我有一個(gè)夢(mèng)想：能夠擁有一套 <span class="iconfont icon-home"></span> </p>

這里的span標(biāo)簽里面放的就是要用的某個(gè)字體圖標(biāo)了，你會(huì)發(fā)現(xiàn)它用了兩個(gè)class類名。

第一個(gè)是iconfont，也就是我前面劃的重點(diǎn)（到這里不明白的話，可以再回頭看看）

第二個(gè)是icon-home，這個(gè)類名從何而來(lái)呢？

來(lái)，繼續(xù)往下看，再次打開icon文件夾下的



話不多說(shuō)，直接看圖



是不是對(duì)應(yīng)上啦！簡(jiǎn)單地說(shuō)就是你要用那個(gè)圖標(biāo)就添加它的class類名。



到這里，恭喜你已經(jīng)學(xué)會(huì)了如何在網(wǎng)頁(yè)中插入字體圖標(biāo)啦！！！

那么，趕快運(yùn)行一下看看效果吧！



到這里是不是還滿足不了你的需求，會(huì)有這樣的疑問(wèn)：如果是這樣的效果，跟一張圖片有什么區(qū)別呢？？？

當(dāng)然不是啦！

之所以叫做字體圖標(biāo)，顧名思義，它在網(wǎng)頁(yè)中就是一種字體的存在，不過(guò)它比普通字體長(zhǎng)得好看些有木有！

我們可以像更改文字樣式一樣去更改它的樣式，比如說(shuō) 大小、顏色、陰影…



Symbol 引用方式還可以實(shí)現(xiàn)下面原圖標(biāo)的彩色效果哦！可以自己照著官方提供的步驟試試看





下面附上Font class引用方法的 源代碼 供參考

前面的步驟一定要看！！！

如果前期工作沒(méi)做的話，直接用我的源代碼是實(shí)現(xiàn)不了的。



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字體圖標(biāo)</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>

        我有一個(gè)夢(mèng)想：能夠擁有一套

        <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

花費(fèi)了很長(zhǎng)時(shí)間整理出來(lái)的。

很簡(jiǎn)單是不是！！！

看到這里還不會(huì)的話，建議重新再看一遍！



其中有錯(cuò)誤的話，還請(qǐng)指出，我會(huì)虛心接受并改正！！！

————————————————

版權(quán)聲明：本文為CSDN博主「Humy.」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_42678796/article/details/104569773