微信小程序引入阿里巴巴iconfont字体图标的步骤（条理性强，易懂，细节）

开始

1.进入iconfont官网，按提示选择登录方式登录，建议大家使用GitHub账号登录，没有GitHub账户的可以去GitHub官网进行注册。

2.输入你想要的图标的中文描述，例如“播放”，点击下面的搜索按钮。
3.选择一个你喜欢的图标，鼠标悬浮到该图标上，然后选择“购物车”图标，此时右上角的“购物车“图标会显示"1",说明图标添加成功。

4.点击右上角的“购物车”图标，点击下图绿色方框里的新建项目图标，输入项目名，点击确认。（我在这里为了举例新建了一个名为“demoProject”的项目）
5.步骤4操完完成后页面会自动跳转到下图（如果页面没有正常跳转，可以手动选择“图标管理—我的项目“，同样会进入到下图所示的页面）
6.点击“查看在线连接”按钮，下方会出现“暂无代码，点此生成连接”字样，点击后会出现下图界面。
7.将上图红色方框中的地址前面加上“http:”并访问会得到如下页面，将该页面另存到桌面，命名时不要用中文命名，尾缀改为“.wxss”，因为我们想要的这个“播放”图标和音乐有关，所以在这里为了举例我将改该文件命名为musicIcon.wxss。到此为止，我们已经准备好了这个样式表文件，其实这个文件就和我们之前用过的bootstrap.css或者elementUI.css的作用是一样的，相当于一个库文件，当我们使用的时候只要把这个wxss文件引进去，然后把对应的类写到小程序的wxml标签上就可以了。那么，从下面开始我们来看如何将musicIcon.wxss引入到小程序并在小程序的wxml文件中使用。
8.建议将musicIcon.wxss文件放到miniprogram项目文件夹中最外层，和app.wxss属于同级目录，这样做你就可以在任何地方使用了（除了这种全局都可能用到的样式表文件建议放到最外层外，其他的不建议放在最外层，会显示项目结构不清晰）

9.在app.wxss中使用import语法引入musicIcon.wxss。
10.开始使用：
注意：红色方框里的类名通过下图“复制”获取即可。

—大功告成 （vue，react中引入iconfont同理）

注：在这里要说明，上面的步骤中我只添加了一个“播放”的图标是为了举例，“上一首”和“下一首”这两个图标的添加方式和“播放”图标同理，只不过我没有在上述步骤中提及而已。

说明：原创文章，转载请注明出处，谢谢。