vue-cli 脚手架构建的项目中引入iconfont图标方法
2021-07-01 本文已影响0人
MT659
vue-cli脚手架构建的项目中引入iconfont图标方法
图标作为一种装饰,会让页面变得好看、简洁明了。iconfont是阿里巴巴提供的一个矢量图标库,我们可以在库中找到需要的图标,通过下载并引入到项目中就可以直接使用了。
前提:使用vue-cli脚手架构建的项目
选择需要的图标并下载
解压下载后的文件并找到以下四个文件,将这四个文件放入到项目的assets文件夹中(为了以后管理方便,可以在assets文件下面新建了一个font文件夹,并将图标文件放在该文件夹中)
![](https://img.haomeiwen.com/i20669848/4b6989b785a2c4b5.png)
![](https://img.haomeiwen.com/i20669848/85cc23ebfe5d018e.png)
在项目的main.js文件中引入
![](https://img.haomeiwen.com/i20669848/ccc10cd01c2a87cb.png)
查看项目的 package.json
文件中是否有 css-loader
处理器,如果有,忽略这一步,如果没有,使用 npm install css-loader --save-dev
安装
大功告成,可以在项目的 vue 文件中通过使用图标的 class 将图标引入到页面中
![](https://img.haomeiwen.com/i20669848/3c0e3087c8386ec4.png)
![](https://img.haomeiwen.com/i20669848/aedfd4b0280e2b48.png)