在Vue项目和微信小程序中使用阿里图标

在vue项目中正确使用iconfont的方法

1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车

2、点击购物车，添加至我的项目

3、点击font-class、下载至本地，一个压缩包文件，将文件解压

4、我们将解压好的文件里边的iconfont.css放到项目的assets文件夹下（可创建一 个css文件或iconfont文件）

5、在main.js中引入iconfont.css样式

import '@/assets/iconfont/iconfont.css'

6、在.vue文件中使用

<i class="iconfont icon-zitigui-xianxing"></i>

7、假如报错，需要下载css-loader依赖包

npm install css-loader --save

在微信小程序中正确使用iconfont的方法

1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车

2、点击购物车，添加至我的项目

3、点击font-class、点击查看在线链接

4、然后点击链接右击，在浏览器中打开，复制

5、使用

在小程序的根目录下新建assets文件夹,在assets文件夹下新建iconfont文件夹，在iconfont文件夹下新建iconfont.wxss文件，将复制的代码粘贴进去。

6、在app.wxss文件中引入iconfont.wxss文件

7、在页面中使用icon

<text class="iconfont icon-search"></text>