先提供一個比較好的自定義icon圖示庫阿里圖示庫

所以接下來的使用主要就是以從上面提供的網址下載的icon圖示為例（如果不會使用，請參考使用

下載完之後是一個壓縮包，解壓後，只需要根據我們的需要把相應的檔案放入我們的專案中即可

需要注意的是：我們一般會將我們下載的字型圖示放在我們自己建fonts資料夾中，把iconfont.css放在css資料夾中，如果你這樣做了，一定要記得修改iconfont中的路徑，比如，你的檔案是像下面這樣的

開啟你的iconfont.css，裡面的結構是：

@font-face {font-family: "iconfont";
  src: url('../iconfont.eot?t=1529571163938'); /* IE9*/
  src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAA') format('woff'),//因為base64編碼太長，所以我刪減了一點，主要是看過程哈
  url('../iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dianying:before { content: "\e67d"; }

.icon-kongbudianyinghulijing:before { content: "\e602"; }

.icon-kongbudianyingxixiegui:before { content: "\e606"; }

.icon-dianying1:before { content: "\e627"; 
 

那其實我們要修改的也只是

@font-face {font-family: "iconfont";
  src: url('../iconfont.eot?t=1529571163938'); /* IE9*/
  src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAAAAFzAAAQA') format('woff'),//因為base64編碼太長，所以我刪減了一點，主要是看過程哈
  url('../iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */
}

修改後為

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1529571163938'); /* IE9*/
  src: url('../fonts/iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAAA') format('woff'),//因為base64編碼太長，所以我刪減了一點，主要是看過程
  url('../fonts/iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */
}
 

修改完之後，就是怎麼使用了，它上面提供了三種使用方式：

第一種：unicode引用
unicode是字型在網頁端最原始的應用方式，特點是：
相容性最好，支援ie6+，及所有現代瀏覽器。
支援按字型的方式去動態調整圖示大小，顏色等等。

但是因為是字型，所以不支援多色。只能使用平臺裡單色的圖示，就算專案裡有多色圖示也會自動去色。

如果我們使用這種方式，我們只需要在我們的專案中匯入下面的這幾個檔案就可以了，其他的都可以不要

iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff

iconfont.css

並且其實我們是可以將iconfont.css中的下面部分刪除掉

.icon-dianying:before { content: "\e67d"; }

.icon-kongbudianyinghulijing:before { content: "\e602"; }

.icon-kongbudianyingxixiegui:before { content: "\e606"; }

.icon-dianying1:before { content: "\e627"; 

準備好之後就是使用了，首先需要引入iconfont.css檔案

<link rel="stylesheet" type="text/css" href="style/iconfont.css"/>

然後主要就是html程式碼了，看下面的簡單示例

 <i class="icon iconfont"></i>
 <div class="name">電影院</div>

css程式碼其實就是看你自己怎麼寫了，主要就是改變字型顏色了，大小了，行高等等，我就不再寫了

第二種：font-class引用
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點：
相容性良好，支援ie8+，及所有現代瀏覽器。
相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。

不過因為本質上還是使用的字型，所以多色圖示還是不支援的。

使用方法和第一種很類似，只是iconfont.css中的內容就不要刪除了

使用方法：首先需要引入iconfont.css檔案

<link rel="stylesheet" type="text/css" href="style/iconfont.css"/>

使用示例如下：

<i class="icon iconfont icon-kongbudianyingxixiegui"></i>
<div class="name">恐怖電影</div>

和第一種的不同就是，用class類代替使用unicode了，這個類名一般都是語義化的，而且編譯器自己一般也會提醒，所以不用擔心

第三種：symbol引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：
支援多色圖示了，不再受單色限制。
通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
相容性較差，支援 ie9+,及現代瀏覽器。

瀏覽器渲染svg的效能一般，還不如png。

這個的使用方法就和上面的有所不同了，使用方法如下：

第一步：引入專案下面生成的symbol程式碼：注意使用這種方法，引入的不是iconfont.css,而是iconfont.js

<script src="./iconfont.js"></script>

第二步：加入通用css程式碼（引入一次就行）：

<style type="text/css">
.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>

            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianying1"></use>
            </svg>
            <div class="name">電影</div>