vue项目中使用iconfont图标

文章目录

    • 下载
    • vue中引入

下载

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

vue项目中使用iconfont图标_第1张图片
在这里插入图片描述

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

vue项目中使用iconfont图标_第2张图片

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

vue中引入

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

在这里插入图片描述
vue项目中使用iconfont图标_第3张图片

  • 保证id对应即可

你可能感兴趣的:(前端--vue)