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

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