阿里巴巴字体图标库使用方法【前端类超详细】

作为一个前端程序员，iconfont阿里字体图标库肯定有所耳闻，这里基本可以找到你想要的图标，并且提供多种格式供您选择。

可能有的人会说，我们UI设计师会切好图发到我们手里。可万一要做的是自己项目，或者公司没有UI小姐姐，自己又没有PS、AI的使用能力，那么你就要依靠这个图标库了

使用方法

第一步-搜索图标添加至购物车

这里，我选择首页和我的两个icon图标作为演示

第二步-查看购物车并添加至项目

点击右上角购物车图标，会展示你刚刚选择的图标，然后点击添加至项目。
最好添加至项目，方便增加、修改图标。会自动跳转项目页面。

第三步-生成字体css

点击生成代码，复制生成的地址，在浏览器打开。

复制浏览器后打开是这个样子，全部复制到你的编译器即可。

第四步-使用iconfont字体

复制到编译器为css文件，并在html文件内引入

注意：一定要加上iconfont这个类，再加上你要展示的icon类，如下图，否则图标不生效。

最后的话

1. 如果是微信小程序内使用，则要后缀名要为wxss，不能为css。
2. 由于是字体类，所以可以更改大小颜色，并且不会失真，而且文件很小。
3. 不用css样式，也可以选择svg这种矢量格式，下载到本地，把它当图片一样使用即可，不会失真的哦。
4. 如果项目依赖icon很多，可以导入全局样式中，直接添加类名即可，很方便。

个人博客，欢迎来踩：https://yuanxiaoshen.com/