視頻鏈接

一. 字體圖標的產生

字體圖標使用場景：主要用于顯示網頁中通用、常用的一些小圖標。

精靈圖是有諸多優點的，但是缺點很明顯
　　1. 圖片文件還是比較大的
　　2. 圖片本身放大和縮小會失真。
　　3. 一旦圖片制作完畢想要更換非常復雜。

此時，有一種技術的出現很好的解決了以上問題，就是字體圖標 iconfont
字體圖標可以為前端工程師提供一種方便高效的圖標使用方式，展示的是圖標，本質屬于字體。

二.字體圖標的優點

輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會馬上渲染出來，減少了服務器請求
靈活性：本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等
兼容性：幾乎支持所有的瀏覽器，請放心使用

注意：字體圖標不能替代精靈技術，只是對工作中圖標部分技術的提升和優化。

總結

1. 如果遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。
2. 如果遇到一些結構和樣式復一點的小片，就用精靈圖。

三. 字體圖標的使用

1. 字體圖標的下載

推薦下載網站：

icomoon 字庫 http://icomoon.io

　 Icomoon成立于2011年，推出了第一個自定義圖標字體生成器，它允許用戶選擇所需要的圖標，使它們成一字型。該字庫內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

阿里 iconfont 字庫 http://www.iconfont.cn/

　　這個是阿里媽媽M2UX的一個 iconfont 字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI制作圖標上傳生成。

---

icomoon 字庫的使用（阿里 iconfont 字庫的使用與此類似）：

1）點擊右上角箭頭所指按鈕

2）點擊選擇需要的字體圖標，底部的Selection顯示已選擇的字體圖標數

3）若翻到最下面仍沒有找到需要的字體圖標，點擊左下角鏈接可添加更多圖標

4）還可以對字體圖標進行編輯

5）選擇完畢之后，點擊右下角的生成字體，就能看到，點擊右下角Download即可得到一個壓縮包 icomoon.zip

2. 字體圖標的引入(引入到我們的 html 頁面中)

1）把下載包里面的 fonts 文件夾放入頁面根目錄下

2）將下載包里面的 style.css 樣式文件中 如下所示選中的代碼復制到頁面樣式中

3）html 標簽內添加小圖標

打開壓縮包中的 demo.html 文件，選擇需要的圖標，復制如下圖所示的小方塊 到<span> </span> 中，設置span中的字體為icomoon

注：雖然都是看似一樣的?小方塊，但因為引入了icomoon字體，所以它們的實際顯示效果并不是?

在偽元素選擇器中還可以用?小方塊前面的編碼來引入

3. 字體圖標的追加（以后添加新的小圖標）

如果原來的字體圖標不夠用了，我們需要添加新的字體圖標到原來的字體文件中。 把icomoon文件夾里面的 selection.json 重新上傳，然后選中自己想要新的圖標，重新下載壓縮包，并替換原來的文件即可。

1）點擊左上角的 Import Icons 按鈕，選擇壓縮包里面的 selection.json文件

2）點擊Yes重新加載

3）選擇需要新加的字體圖標，再點擊生成字體，下載壓縮包，替換原先的文件

總結

以上是生活随笔為你收集整理的字体图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。