在原有项目添加一个新的icon图标

第一步 找到原有图标所在的位置

如:
在这里插入图片描述

第二步 在阿里巴巴矢量图标库中下载

图标库地址:https://www.iconfont.cn/

在矢量图标库找到自己要新增加的图标,添加到购物车之后,选择添加至项目
如:
![在这里插入图片描述](https://img-blog.csdnimg.cn/b7b9dc0643214393925a32f7201d007a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXVyb25neXV5YW8=,size_9,color_FFFFFF,t_70,g_se,x_16

第三步 到我的项目中点击下载至本地

在这里插入图片描述
下载之后解压,解压完成的目录是这样的:
在这里插入图片描述

第四步 将先下载的代码复制到项目中

1.解压下载下来的压缩包,然后找到iconfont.css这个文件,将@font-face这一段复制到原来的iconfont.css文件中
在这里插入图片描述
还有
在这里插入图片描述

2 然后就是在下面将新图标的类复制过来,也是从新图标的iconfont.svg复制到原来的iconfont.svg中,注意如果新的图标的命名与原来的有冲突的话,自行修改一下,不然就覆盖掉原来的了
将下面的复制到项目icon中的iconfont.svg

<glyph glyph-name="xinxiguanli" unicode="&#59013;" d="M268.8 678.1h401.1V631H268.8v47.1m0-170.6h401.1v-47.2H268.8v47.2m0-169.2h229.3v-47.1H268.8v47.1m712.5-164.7C946.4 231.9 947 233 947 233s-120.6-33.8-143.1 81.8H734S714.7 199 591.5 233.3c-35.6-59.4-36.8-61.2-36.9-61.3 0.1 0 96.5-67.4 0-158.9l37.4-61.5s106.5 45.9 141.4-79.6h70.7s22.2 115.3 141.9 81.2c34.1 58.2 34.7 58.8 34.7 58.8s-90.3 78 0.6 161.6zM767.4-33.1c-69.8 0-126.5 56.6-126.5 126.5s56.6 126.5 126.5 126.5S894 163.3 894 93.4s-56.7-126.5-126.6-126.5zM165.9-77.8c-37.8 0-68.4 30.6-68.4 68.4V774.1c0 37.8 30.6 68.4 68.4 68.4H776c37.8 0 68.4-30.6 68.4-68.4v-411.4H896v448C896 857.8 857.8 896 810.7 896H128C80.9 896 42.7 857.8 42.7 810.7v-853.3c0-47.1 38.2-85.3 85.3-85.3h392.5v50.2H195.9"  horiz-adv-x="1024" />

![在这里插入图片描述](https://img-blog.csdnimg.cn/fb214ee9cc054e209d9a0e8365d8d635.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXVyb25neXV5YW8=,size_20,color_FFFFFF,t_70,g_se,x_16

3 上面几步都做完之后,就可以跟其他图标一样,在项目中使用啦。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值