1.簡介
Iconfont-阿裡巴巴矢量圖示庫，就是一個大超市 ，裡面有海量的矢量圖示，也有彩色的。支援中文搜尋。需要哪個圖示搜尋到之後可以加入購物車。現在2019年8月31日，裡面就已經有六千兩百多萬個圖示了。網站連結：https://www.iconfont.cn/
非阿裡員工必須使用新浪微網誌賬号或者Github登入，來儲存自己需要的圖示。
有一個缺點是如果你找好了所需要的圖示，點選下載下傳之後，那個圖示就在購物車中消失了，就像你網購買了購物車的東西之後，該商品就從購物車中消失了一樣。
這時你可以在購物車界面中建立一個項目，這樣下次點開圖示庫還能找到以前選中的一些圖示
這些圖示不僅可以下載下傳圖示的代碼——前端工程師需要
還可以下載下傳圖示的PNG格式——UI設計師需要
還可以編輯圖示的資訊：比如顔色，位移，大小，旋轉角度
選好圖示之後，點選下載下傳，下載下傳一個壓縮包後，解壓，将檔案添加到項目中。
使用方法
解壓好的檔案 中有個名為demo_index.html的檔案 點開，裡面有詳細的字元使用的三種方法
1.Unicode 引用
Unicode 是字型在網頁端最原始的應用方式，特點是：
- 相容性最好，支援 IE6+，及所有現代浏覽器。
- 支援按字型的方式去動态調整圖示大小，顔色等等。
- 但是因為是字型，是以不支援多色。隻能使用平台裡單色的圖示，就算項目裡有多色圖示也會自動去色。
注意：新版 iconfont 支援多色圖示，這些多色圖示在 Unicode 模式下将不能使用，如果有需求建議使用symbol 的引用方式
Unicode 使用步驟如下：
第一步：拷貝項目下面生成的 @font-face
@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;
}
第三步：挑選相應圖示并擷取字型編碼，應用于頁面
<span class="iconfont">3</span>
"iconfont" 是你項目下的 font-family。可以通過編輯項目檢視，預設是 "iconfont"。
2.font-class 引用
font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直覺，語意不明确的問題。
與 Unicode 使用方式相比，具有如下特點：
- 相容性良好，支援 IE8+，及所有現代浏覽器。
- 相比于 Unicode 語意明确，書寫更直覺。可以很容易分辨這個 icon 是什麼。
- 因為使用 class 來定義圖示，是以當要替換圖示時，隻需要修改 class 裡面的 Unicode 引用。
- 不過因為本質上還是使用的字型，是以多色圖示還是不支援的。
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑選相應圖示并擷取類名，應用于頁面：
<span class="iconfont icon-xxx"></span>
" iconfont" 是你項目下的 font-family。可以通過編輯項目檢視，預設是 "iconfont"。
3.Symbol 引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
- 支援多色圖示了，不再受單色限制。
- 通過一些技巧，支援像字型那樣，通過
font-size
color
- 相容性較差，支援 IE9+，及現代浏覽器。
- 浏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下：
第一步：引入項目下面生成的 symbol 代碼：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代碼（引入一次就行）：
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑選相應圖示并擷取類名，應用于頁面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>