1.说明

我们在前端需要使用图标，有些情况我们需要使用自己定义图标，下面就介绍一下自定义图标的过程。

2. 获取自定义图标

• 创建自己的iconfont账号并登录（iconfont.cn）；

• 然后联系我们，叫我们这边给你的账号加入到图标项目中；

• 然后进入到“资源管理—>我的项目”中，找到对应的项目,并下载至本地（如下图）；
  

• 得到压缩包，解压，复制需要的文件；

• 放入到项目中；

3.使用图标

在main.js中引入，注意有2种使用方法，

• 一种是结合AntDesignVue来引入
• 一种是直接引入，使用的时候有点差别；

3.1 结合AntDesignVue使用：

• 找到项目入口文件main.js,引入字体图标（目前我们使用的）;

//引入Ant Design Vue中的icon
import {
  Icon
} from 'ant-design-vue'

//这个iconfont.js就是从iconfont.cn网站上下载后的解压JS文件
import iconFront from '../static/css/fonts/iconfont.js'
const myicon = Icon.createFromIconfontCN({
  scriptUrl: iconFront
})
//引用
Vue.component('my-icon', myicon)

• 使用图标直接在需要使用图标的地方使用<my-icon type="xxx"></my-icon>（注：此处my-icon是在main.js注册的全局组件，可以自定义）；
  

• 关于<my-icon type="xxx"></my-icon>中type的值，在iconfont.cn中看；
  
  

此时注意看图标的前缀：如果没有前缀就直接<my-icon type="file-exclamation-fill"></my-icon>如果有前缀就<my-icon type="前缀file-exclamation-fill"></my-icon>

我们是有的所以最终是<my-icon type="iconfile-exclamation-fill"></my-icon>

–1.4如果还是不放心我们可以用图标的Unicode编码，在iconfont.css中来找：


复制名字，最终<my-icon type="iconfour"></my-icon>

3.2 、iconfont引入;

• 在main.js中引入iconfont.css文件；
  

• 使用直接在项目中使用<i class="iconfont iconfour">，此时class第一个类对应iconfont.css中的iconfont(有些项目不一定是iconfont),