阿里图标库iconfont下载和在旧有的iconfont中添加新的图标

迈不过友情╰ 2022-10-23 11:18 374阅读 0赞

### 一、阿里图标下载 ###

1、访问阿里图标库官网：www.iconfont.cn，将喜欢的图标加入购物车

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70][]

2、把需要的图标都加入到购物车后，点击右上角“购物车”，查看选好的图标

![20210305103007370.png][]

3、点击“下载代码”，将图标代码下载到本地

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1][]

4、解压，然后把整个文件夹拷贝到需要用到的项目中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 2][]

其中iconfont.css就是需要的图标样式。demo\_index.html就是图标使用实例。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 3][]

5、图标的使用方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 4][]

### 二、在原来的iconfont图标中添加新的图标 ###

将新的iconfont.css中的 **除 .iconfont\{......\} 外 **的所有代码拷贝到原来的iconfont.css中代码的后面即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 5][]

参考：[https://www.cnblogs.com/xzybk/p/12544555.html][https_www.cnblogs.com_xzybk_p_12544555.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70]: /images/20221023/98718c25b8fb4bf1bedaa6f0b7d5264c.png
[20210305103007370.png]: /images/20221023/3cade1a643c641508f951b808a76f056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/5cefbdb8267441299b70326f8bb3b376.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/456c33129ae3477a9bed78879a938385.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/5e7417fcd34342969bc8a7ba2c1b2008.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 4]: /images/20221023/4f0c014425ff4e08bccaacdac3b5a16f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 5]: /images/20221023/a821d47a922d49aeae269261422e3de2.png
[https_www.cnblogs.com_xzybk_p_12544555.html]: https://www.cnblogs.com/xzybk/p/12544555.html