iconfont使用方法的详细教程，html怎样引入iconfont，解决iconfont只有小方框的显示（已解决）

亦凉 2023-08-17 17:43 85阅读 0赞

> 摘要：小方框的问题是因为使用官方的CDN引入是会报错的，所以我们直接把图标的代码下载下来使用即可。

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）；  
2.然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]  
3.接着就是把下载好的文件解压出来，放到项目的css文件夹（方便之后在html中引用）；  
![在这里插入图片描述][20191002111221644.png]  
4.文件放到项目后，只需要引用iconfont.css这个文件即可；  
![在这里插入图片描述][20191002111235826.png]  
5.最后一步肯定是调用了(两种方式)：  
![在这里插入图片描述][2019100211125377.png]  
转载自：[https://blog.csdn.net/qq\_44939874/article/details/89428895][https_blog.csdn.net_qq_44939874_article_details_89428895]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: /images/20230808/62bb05305a7f42f991058a802717c8c0.png
[20191002111221644.png]: /images/20230808/a5e4718a29ca405a99f33e0f8b04b9cd.png
[20191002111235826.png]: /images/20230808/664ae965d0e4445eb481607e12cb487d.png
[2019100211125377.png]: /images/20230808/80bb8da74c5648e1b7b0b18da5001e6b.png
[https_blog.csdn.net_qq_44939874_article_details_89428895]: https://blog.csdn.net/qq_44939874/article/details/89428895