一·背景

估計我這文章也就是寫給後端的程式設計師看的，“不會寫前端的後端不是一個好測試” 是我在一些技術交流群的暱稱。。。

前端程式設計師估計也不會遇到這些問題。這算是繼第一篇引入圖示相關的教程的續篇吧：【Vue】 element ui 引入第三方圖示http://blog.csdn.net/b376924098/article/details/78286880

在前端開發的時候，需要引入彩色的圖示，看到iconfont 上的彩色圖示挺不錯的，就引入它吧，實際上iconfont上也是有引入彩色圖示的教程的，但還是遇到點麻煩。

二·教程

引入圖示的基礎教程就看第一篇文章吧。

1·第一步進入 iconfont 後 在多色圖示庫 選一些自己用到的彩色圖示，並新增至自己的專案

2·下載到本地，開啟壓縮包後，我們可以看到 demo_symbol.html 開啟後顯示的是彩色圖示

官方提供的教程：

symbol引用

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：

支援多色圖示了，不再受單色限制。
通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
相容性較差，支援 ie9+,及現代瀏覽器。
瀏覽器渲染svg的效能一般，還不如png。
使用步驟如下：

第一步：引入專案下面生成的symbol程式碼：

<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="#tiebazs-xxx"></use>
</svg>
 

3·我的使用方式，可以看到和引入普通圖示的方式略有不同

<svg class="svgIcon" aria-hidden="true">
   <use :xlink:href="#tiebazs-shebaochaxun"></use>
</svg>

.svgIcon {
  width: 20px; height: 20px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

aria-hidden 的意思 （摘自網際網路）：

圖示的可訪問性

現代的輔助技術能夠識別並朗讀由 CSS 生成的內容和特定的 Unicode 字元。為了避免 螢幕識讀裝置抓取非故意的和可能產生混淆的輸出內容（尤其是當圖示純粹作為裝飾用途時），我們為這些圖示設定了 aria-hidden="true" 屬性。

如果你使用圖示是為了表達某些含義（不僅僅是為了裝飾用），請確保你所要表達的意思能夠通過被輔助裝置識別，例如，包含額外的內容並通過 .sr-only 類讓其在視覺上表現出隱藏的效果。

如果你所建立的元件不包含任何文字內容（例如， <button> 內只包含了一個圖示），你應當提供其他的內容來表示這個控制元件的意圖，這樣就能讓使用輔助裝置的使用者知道其作用了。這種情況下，你可以為控制元件新增 aria-label 屬相。