vue项目中引入阿里iconfont图标


0. 注册账号

https://www.iconfont.cn/

1. 图标库里面去选择自己中意的图标添加到库,如下图:

vue项目中引入阿里iconfont图标

2. 图标选的差不多了打开右侧的库,把库里面的图标添加到你的项目(没有项目就新建一个):

vue项目中引入阿里iconfont图标

3. 把整个项目下载到本地:

vue项目中引入阿里iconfont图标

4. 下载的文件解压,得到一个文件夹里面有这几个文件:

vue项目中引入阿里iconfont图标

5. vue中使用

demo_index.html 为示例文档,可以参考一下, 咱们用的是font class,Symbol据说现在还不稳定。
vue项目中引入阿里iconfont图标

5. 1 拷贝进项目,并引用

我拷贝的目录为:

vue项目中引入阿里iconfont图标
在main.js 引入css
vue项目中引入阿里iconfont图标
html中使用
vue项目中引入阿里iconfont图标

6. 效果

vue项目中引入阿里iconfont图标

相关文章:

  • 2021-10-13
  • 2022-01-19
  • 2021-11-28
  • 2022-01-14
  • 2021-11-03
  • 2021-06-27
  • 2021-04-30
  • 2021-09-11
猜你喜欢
  • 2021-11-19
  • 2021-12-17
  • 2021-03-29
  • 2021-04-12
  • 2021-12-18
  • 2021-07-08
  • 2022-01-17
相关资源
相似解决方案