由于之前的項目需要，所以使用的bootstrap的字體圖標(biāo)，但是項目越往后，越發(fā)現(xiàn)bootstrap的字體圖標(biāo)數(shù)量太少。之前很早就聽說阿里的字體庫，可以點(diǎn)擊這里。本地嘗試了一下，發(fā)現(xiàn)使用非常的簡單。
首先，我們了解幾個使用字體圖標(biāo)得好處：
1.如果設(shè)計是按照這個庫里的圖標(biāo)來設(shè)計網(wǎng)頁的話，那前端就能減少很大的切圖壓力；
2.字體圖標(biāo)可以通過設(shè)置font-size來改變大小，color改變顏色，font-weight改變粗細(xì)；
3.相對于圖片，總的文件大小會小很多；其次，我們來看一下阿里的圖標(biāo)庫有哪些字體圖標(biāo)：
pic1.jpg
- 我們該如何使用呢？
pic2.jpg
pic3.jpg
1.在網(wǎng)站中選擇想要的字體圖標(biāo)，點(diǎn)擊加入購物車（其實是完全免費(fèi)的，不要被購物車圖標(biāo)嚇著~），然后在頂部的購物車列表中批量下載到本地。
下載后，我們會得到這樣一個文件夾：
pic4.jpg
- 在項目中引入圖pic4中紅色箭頭標(biāo)注的地方；
3.在自己的html中引入iconfont.css，然后在標(biāo)簽上指定iconfont的class，修改標(biāo)簽的innerText就可以實現(xiàn)成功調(diào)用，具體看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="iconfont.css">
<style>
.icon1{font-size: 20px;color: #f00;}
.icon2{font-size: 26px;color: #f06;}
.icon3{font-size: 30px;color: #000;}
.icon4{font-size: 30px;color: #000;font-weight: bold;}
</style>
</head>
<body>
<span class="icon1 iconfont"></span>
<span class="icon2 iconfont"></span>
<span class="icon3 iconfont"></span>
<span class="icon4 iconfont"></span>
</body>
</html>
4.innerText具體的值，如''可以參考下載文件后的demo.html中：
pic6.jpg
5.實現(xiàn)效果：
pic5.jpg
圖標(biāo)得大小、顏色、粗細(xì)都是可以修改的，就像控制字體樣式一樣，動手嘗試吧~
