vue-cli脚手架构建的项目中引入iconfont图标方法

图标作为一种装饰,会让页面变得好看、简洁明了。iconfont是阿里巴巴提供的一个矢量图标库,我们可以在库中找到需要的图标,通过下载并引入到项目中就可以直接使用了。

前提:使用vue-cli脚手架构建的项目

1、选择需要的图标并下载

2、解压下载后的文件并找到以下四个文件,将这四个文件放入到项目的assets文件夹中(为了以后管理方便,可以在assets文件下面新建了一个font文件夹,并将图标文件放在该文件夹中)

vue-cli脚手架构建的项目中引入iconfont图标方法

vue-cli脚手架构建的项目中引入iconfont图标方法

3、在项目的main.js文件中引入

vue-cli脚手架构建的项目中引入iconfont图标方法

4、查看项目的package.json文件中是否有css-loader处理器,如果有,忽略这一步,如果没有,使用npm install css-loader --save-dev安装

vue-cli脚手架构建的项目中引入iconfont图标方法

5、大功告成,可以在项目的vue文件中通过使用图标的class将图标引入到页面中

vue-cli脚手架构建的项目中引入iconfont图标方法

vue-cli脚手架构建的项目中引入iconfont图标方法

参考文献

[1] vue项目中使用阿里iconfont图标

相关文章:

  • 2021-09-08
  • 2022-12-23
  • 2021-10-16
  • 2021-09-16
  • 2022-01-19
  • 2021-09-07
  • 2022-12-23
猜你喜欢
  • 2021-11-16
  • 2021-09-23
  • 2022-12-23
  • 2021-08-28
  • 2021-06-20
  • 2022-12-23
相关资源
相似解决方案