vue项目中使用iconfont图标

文章目录

下载

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

  • 下载到本地(内置完整demo)

vue中引入

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

在这里插入图片描述
在这里插入图片描述

  • 保证id对应即可
发布了450 篇原创文章 · 获赞 787 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/qq_42813491/article/details/91129679