一、使用

1. 打开 http://www.iconfont.cn/

2. 将图标加入购物车

3. 点击下载代码 => github登录（Sign in）=> 解压下载的文件夹 => 将文件夹复制到 assets文件夹中

icon.png

4. 在用到图标的组件中写： （将demo_fontclass.html在浏览器中打开即可看到具体操作）

<i class='iconfont icon-gouwuche'></i> 

两个class名
第一个为iconfont.css中的class名 即 .iconfont
第二个为将demo_fontclass.html在浏览器中打开时图标下面的class名

class.png

icon_name.png

<style>
@import '../assets/icon/iconfont.css';    // 引用 iconfont.css
</style>

二、引入彩色图片（Symbol用法）

1、选择图片，加入购物车，点击“下载代码”

第一步

2、取出压缩文件中的iconfont.js

第二步

3、放到vue项目下，/public/static/js/iconfont.js目录下

第三步

4、main.js引入该文件

import '../public/static/js/iconfont'

5、直接在vue文件中用

      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-3Dyouxirenxiang"></use>
      </svg>

.icon {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}

• 注：可以封装组件
  参考：https://blog.csdn.net/OhRookie/article/details/116495001