4-2 阿里云矢量图标库

🖼 所有搭建博客的汇总在这里：Blog全程搭建

iconfont图标库地址：iconfont-阿里巴巴矢量图标库

简单来说就是选购—>添加到新项目—>在项目中使用css引用—>配置博客inject项和图标

本文给出最最最稳妥的配置方法，不会报错

1、彩色图片要求项目图片少于40张，多于40张项目自动转换成灰度图，

2、引入图标请用Font Class / Symbol样式，且在图片前加iconfont。

1、购买任意图标

点击图标，添加购物车，把图标购买入项目，没什么难点，可以参考这个的前三张图
https://blog.csdn.net/qq_61838643/article/details/132211431

2、找到我的图标

点击上方资源管理—>我的图标

3、打开项目配置

4、打卡彩色图像配置

5、点击下载到本地

6、解压文件

7、拷贝文件到指定目录，并在Butterfly配置文件中引入

8、编辑相关内容使用图标

menu:
  主页: / || iconfont icon-hua00
  时间轴: /archives/ || iconfont icon-hua01
  执笔为剑||iconfont icon-flower3:
    日常: /2024/01/01/11/2024/ || iconfont icon-huadian-baihe
    算法: /2024/01/01/12/index/ || iconfont icon-004-marigold
    英语: /2024/01/01/13/index/ || iconfont icon-a-meiguihuahuahuaduozhiwu
    考研: /2024/01/01/14/index/ || iconfont icon-xiaohonghua7

  积箧盈藏||iconfont icon-huahualanxianhuameiguihua:
    课程设计:  /categories/课程设计/ || iconfont icon-002-flower-1
    CS基础:  /categories/计算机基础/ || iconfont icon-mudanhuacai
    CS本科课程:  /categories/计科基础课/ || iconfont icon-sakura-flower
    CS兴趣课程:  /categories/兴趣课/ || iconfont icon-naidonghua
    CS文献阅读: /251/ || iconfont icon-huajiaoshuixianhuameiguihua
#    CS研究生课程:  /categories/4/ || icon-flower_26

  雪泥鸿迹||iconfont icon-xiangsufeng_huapen:
    读书拾贝: /categories/读书拾贝/ ||  iconfont icon-xiangsufeng_shuji
    运动养生: /categories/运动养生/ ||  iconfont icon-xiangsufeng_huojian
    似水年华: /categories/似水年华/ ||  iconfont icon-xiangsufeng_xinfeng

  雁素鱼笺||iconfont icon-huashu1:
    留言板: /categories/留言板/ || iconfont icon-flower_23
    友人帐: /link/ ||  iconfont icon-flower_20
    关于我: /about/ || iconfont icon-flower_25