转载原文：https://www.cnblogs.com/goloving/p/8855794.html
iconfont字体图标使用就不多说了，大致是几部：
1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压
2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码
3、在main.js导入iconfont.css文件
import './assets/iconfont/iconfont.css'
4、在代码中使用class="iconfont icon-XXX"就可以使用图标了
但是上面的图标都是黑色的，下面介绍如何引入彩色图标：
下载代码到本地，打开压缩包后，我们可以看到demo_index.html 打开后显示的是彩色图标
注：解压之后可以看到demo的html文件，打开后，选择Symbol可以看到图标样式，和使用方法
官方提供的数据：
<!--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 40px height 40px }
myIconStyle是自定义的样式
补充：aria-hidden 的意思
图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。