Vuevue前端开发那些事儿

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

2021-07-01  本文已影响0人  MT659

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

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

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

选择需要的图标并下载

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

image.png image.png

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

image.png

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

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

image.png ![image](https://img.haomeiwen.com/i20669848/3c0e3087c8386ec4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上一篇 下一篇

猜你喜欢

热点阅读