iconfont字體圖標使用就不多說了，大致是幾部：

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

　　2、在項目assets目錄新建目錄iconfont，用于存放剛才下載解壓的代碼

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

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

　　4、在代碼中使用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>

　　1、main.js里面導入：import './assets/iconfont/iconfont.js'

　　2、App.vue加上：

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

　　3、使用方式略微不同

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

　　myIconStyle是自定義的樣式

　　補充：aria-hidden 的意思

　　圖標的可訪問性

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

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

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

總結

以上是生活随笔為你收集整理的vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。