vue项目中导入iconfont字体图标

vue项目导入iconfont的方式有很多种，在这里我讲一下我自己在实战中常用的一种方式——Font Class。

首先将所需的图标加入到购物车中，然后点击导航栏的购物车图标会弹出右侧界面，点击 下载代码：

解压下载的压缩包得到如下文件：

我们只需将这几个文件导入项目中即可：

然后再main.js文件中全局引入：

并在全局样式文件中加入以下代码：

// 阿里字体图标设置
.icon,
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

最后就可以在项目中使用字体图标了：

在已有的基础上添加新的字体图标

有时候在项目过程中发现还少了几个图标，想在已有的基础上继续添加新的字体图标怎么办呢？

首先，将新的代码文件改名后导入项目中：

将css文件中的内容导入原css文件中，并修改 src 的路径名即可：