1.Iconfont官網
相關閱讀：
2.下載代碼
注意到把鼠標懸停到圖標上，會出現三個按鈕。
我們點擊"添加入庫"按鈕，接着再點擊右上角像購物車一樣的按鈕，最后點擊"下載代碼"按鈕。
下面就是下載的代碼文件。
注意到這里有一個HTML文件demo_index.html，我們用瀏覽器直接打開，看看是什么。
注意到頁面上已經出現了我們下載的那個圖標。
使用文本編輯器打開demo_index.html。
找到頁面中引用圖標的代碼，可以推測出：
- Unicode引用：
<span class="icon iconfont"></span>。 - Font class引用：
<span class="icon iconfont icon-gift"></span>。 - Symbol引用：
<svg class="icon svg-icon" aria-hidden="true"><use xlink:href="#icon-gift"></use></svg>。
3.使用代碼
Unicode引用和Font class引用引入iconfont.css文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="iconfont.css">
<style></style>
<title>阿里巴巴矢量圖標庫</title>
</head>
<body>
<!-- Unicode引用 -->
<i class="icon iconfont" style="font-size:42px;"></i>
<!-- Font class引用 -->
<i class="icon iconfont icon-gift" style="font-size:42px;color:blue;"></i>
</body>
</html>
Symbol引用引入iconfont.js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style></style>
<script src="iconfont.js"></script>
<title>阿里巴巴矢量圖標庫</title>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gift"></use>
</svg>
</body>
</html>
提示：我把上面的class="icon"去掉，圖標還是能顯示出來。