圖片缺點是增加了總文件大小，不能很好地進行“縮放”，因為放大和縮小會失真
字體圖標（iconfont）可做出跟圖片一樣的事，改變透明度、 旋轉度等，但其本質是文字，可以很隨意地改變顏色、產生陰影、透明效果等，本身體積更小但攜帶的信息沒有削減，幾乎支持所有的瀏覽器，移動端設備必備
使用流程
❶ UI人員設計字體圖標效果圖(svg)，在 illustrator 或 Sketch 這類矢量圖形軟件中創建 icon 圖標之后保存為 svg 格式
❷ 前端人員上傳生成兼容性字體文件包
❸ 前端人員下載兼容性字體文件包
❹ 把字體文件包引入HTML頁面中
一般是用現成的，常用網站：阿里icon font字庫、Font-Awesome、icomoon字庫、fontello等
下載阿里的字體圖標后里面會有使用說明，阿里的字體圖標有三種引入方式：unicode、font-class和symbol方式
unicode方式
unicode 方式應該是最開始接觸最熟悉的方式，在 css 中像定義 Web 字體一樣，定義將要使用的 iconfont 的名字還有引入地址，再在類樣式中使用此字體，設置大小顏色等，最后在元素里添加類並粘貼字體編碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> @font-face{ font-family: 'iconfont'; src: url('iconfont/iconfont.eot'); src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont/iconfont.woff') format('woff'), url('iconfont/iconfont.ttf') format('truetype'), url('iconfont/iconfont.svg#iconfont') format('svg');
} .iconfont{ font-family: "iconfont"; font-size:16px; font-style: normal;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
也可以使用偽元素的方式添加字體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> <!--同上，略--> .iconfont{ font-family: "iconfont"; font-size:16px; font-style: normal;
} i::before{ content:"\e602";
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
字體編碼在 html 中是  ，在 css 中是 \e602
font-class方式
font-class 方式是引入其 css 文件，該定義該設置的此文件已經幫做好，所以我們直接用類樣式就能使用對應的字體圖標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
<i class="iconfont icon-aixin"></i>
</body>
</html>
symbol方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixin"></use>
</svg>
<script src="iconfont/iconfont.js"></script>
</body>
</html>
這種方式是第一次使用，直接照說明文檔做即可，感覺不如 font-class 方式簡便，但支持多色圖標是一大優點