文章目录

下载

  • 官网https://www.iconfont.cn/

vue项目中使用iconfont图标_vue
vue项目中使用iconfont图标_vue项目中使用iconfont图标_02

  • 选择一种图标库
  • 将心仪的图标加入购物车
  • 选择完毕点击右上角的购物车图标
  • 新建或选择一个项目

vue项目中使用iconfont图标_vue_03

  • 下载到本地（内置完整demo）

vue中引入

  • 将下载下来的东西解压放到项目目录，你可以建立一个lib文件夹（个人习惯）
  • 如果是用symbol彩色图标，直接在对应的组件import对应路径即可，依赖iconfont.js，不依赖iconfont.css
  • 原始图标依赖iconfont.css，推荐在main.js中加载
  • 这里以彩色图标为例

vue项目中使用iconfont图标_经验分享_04
vue项目中使用iconfont图标_vue项目中使用iconfont图标_05

  • 保证id对应即可