iconfont矢量在已经有的情况下新增图标

最新推荐文章于 2025-06-13 15:46:35 发布

非线性定语从句

最新推荐文章于 2025-06-13 15:46:35 发布

阅读量419

点赞数 2

CC 4.0 BY-SA版权

文章标签： css html vue.js

本文链接：https://blog.csdn.net/weixin_44492275/article/details/120128790

本文档详细介绍了如何在IconFont网站上搜索并添加矢量图标，包括如何避免Unicode冲突、下载配置、修改图标Unicode以及整合到现有项目中的步骤。教程覆盖了从选择图标到更新项目资源的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首选去https://www.iconfont.cn/寻找自己想要的图标
然后到这里一般情况下不要直接下载点击添加至项目(没有就新建一个,就相当于一个收藏夹)
在这里插入图片描述
点击确定只有会跳转到我的项目页面

在这里插入图片描述在里面可以对刚刚添加进来的矢量图进行修改点击这里
这里需要修改是因为咱们是追加新的矢量图可能会遇到 Unicode(16进制)码跟已经存在的图标重复的情况这时咱自己避开已存在的矢量图的 Unicode(16进制)码
在这里插入图片描述
下一步就是下载到本地了
首选要确认一下自己在https://www.iconfont.cn/上项目的下载配置
可以按照我这样配

根据我的配置方式 进行下载至本地 获得以下内容

因为是新增图标要和就图标文件区分我这里是添加-new
将如图带有-new的复制到原有图标相同的地方
在这里插入图片描述
在下载下来的iconfont.css 中的以下内容(@font-face)复制到原有的iconfont.css中

这里要注意了咱改了名字要修改一下
在这里插入图片描述

这个Unicode(16进制)就是在下载后的iconfont.css文件中content的值

在这里插入图片描述

将下载下来的iron的Unicode复制到原有的iconfont.css中
在这里插入图片描述对饮的矢量图样式复制到原有的iconfont.css中 content值就是上面所说的Unicode(16进制)

然后将iconfont.json的内容复制到原有的iconfont.json
这个复制不是全部复制粘贴
只需要复制这一部分