1.说明

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

2. 获取自定义图标

  • 创建自己的iconfont账号并登录(iconfont.cn);

  • 然后联系我们(红迅),叫我们这边给你的账号加入到图标项目中;

  • 然后进入到“资源管理—->我的项目”中,找到对应的项目,并下载至本地(如下图);

  • 得到压缩包,解压,复制需要的文件;

  • 放入到项目中;

3.使用图标

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

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

3.1 结合AntDesignVue使用:

  • 找到项目入口文件main.js,引入字体图标(目前我们使用的);
  1. //引入Ant Design Vue中的icon
  2. import {
  3. Icon
  4. } from 'ant-design-vue'
  5. //这个iconfont.js就是从iconfont.cn网站上下载后的解压JS文件
  6. import iconFront from '../static/css/fonts/iconfont.js'
  7. const myicon = Icon.createFromIconfontCN({
  8. scriptUrl: iconFront
  9. })
  10. //引用
  11. 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),
文档更新时间: 2021-07-09 14:26   作者:zyg