vue中引入第三方字體圖標庫iconfont，及iconfont引入彩色圖標

　　iconfont字體圖標使用就很少說了，大體是幾部：

　　一、在iconfont官網選圖標，加入購物車，加入項目，下載到本地，解壓

　　二、在項目assets目錄新建目錄iconfont，用於存放剛纔下載解壓的代碼

　　三、在main.js導入iconfont.css文件

import './assets/iconfont/iconfont.css'

　　四、在代碼中使用class="iconfont icon-XXX"就可使用圖標了

　　可是上面的圖標都是黑色的，下面介紹如何引入彩色圖標：

　　下載代碼到本地，打開壓縮包後，咱們能夠看到 demo_symbol.html 打開後顯示的是彩色圖標

　　注：解壓以後能夠看到3個demo的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> 

　　一、main.js裏面導入：import './assets/iconfont/iconfont.js'

　　二、App.vue加上：

.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

　　三、使用方式略微不一樣

<svg class="icon myIconStyle" aria-hidden="true"> 　　<use :xlink:href="'#' + dbIcon[item.type]"></use> </svg>

.myIconStyle{
　　width 40px
　　height 40px
}

　　myIconStyle是自定義的樣式

　　補充：aria-hidden 的意思

　　圖標的可訪問性

　　現代的輔助技術可以識別並朗讀由 CSS 生成的內容和特定的 Unicode 字符。爲了不屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤爲是當圖標純粹做爲裝飾用途時），咱們爲這些圖標設置了 aria-hidden="true" 屬性。

　　若是你使用圖標是爲了表達某些含義（不單單是爲了裝飾用），請確保你所要表達的意思可以經過被輔助設備識別，例如，包含額外的內容並經過 .sr-only 類讓其在視覺上表現出隱藏的效果。

　　若是你所建立的組件不包含任何文本內容（例如， <button> 內只包含了一個圖標），你應當提供其餘的內容來表示這個控件的意圖，這樣就能讓使用輔助設備的用戶知道其做用了。這種狀況下，你能夠爲控件添加 aria-label 屬相。