在已有iconfont项目上添加新的iconfont字体图标

最新推荐文章于 2024-07-05 16:58:42 发布
最新推荐文章于 2024-07-05 16:58:42 发布
阅读量1.6k 收藏 12
点赞数 16
文章标签： vue.js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51765549/article/details/135294088
版权
本文介绍了如何向原有的Iconfont项目添加新的图标：在`iconfont.css`中插入新的font-face和icon类，将下载的`iconfont.json`和SVG文件整合到相应的js和文件夹中，保持原有结构不被破坏。

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

步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-guanbi::before(注:原有的不要删除@font-face只是新添加的)

步骤二、粘贴要添加的iconfont.json到原有的iconfont.json下

如果下载的是svg文件需要在iconfont.js中加入新下载的iconfont.js中对应的<symbol></symbol>（不要全部替换，粘贴就行）并且粘贴iconfont.SVG文件到css\icon文件夹

关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 2272
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
iconfont图标资源iconfont图标资源
12-08
2. **选择图标**: 在项目中，可以搜索并添加所需的图标到项目库，Iconfont提供了大量的图标供选择，涵盖各种类别如UI元素、地图、社交媒体等。 3. **自定义下载**: 添加完图标后，可以进行自定义设置，比如选择图标...
在原有的项目上添加新的iconfont图标
weixin_46112174的博客
05-17 2385
在原有的项目上添加新的iconfont图标,超详细步骤~
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 5960
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
在原有的iconfont.css文件中加入新的字体图标
qq_42858057的博客
07-05 1734
在阿里图标库中，如果你没有这个字体图标的线上项目，那么你怎么在本地项目中的原始图标文件中添加新的图标呢？
iconfont 怎么添加新的图标
05-02 1768
1、官方添加新的图标到购物车里面，然后“下载代码”： 2、下载，解压，在 assets 中新建一个 fonts2 的文件夹，用来存放后来下载的图标字体文件。对比之前的 fonts 下面的文件： 注解： 后来下载的字体图标文件，主要查看 iconfont.css 里面@font-face 里面主要引用了哪些文件，然后把这些文件重命名（主要是防止和之前 fonts 下面的文件名冲突），全部拷贝到之前 fonts 文件夹下面。 然后把后来下载的iconfont.css 里面@f...
项目新增iconfont字体图标
lv_qingru的博客
02-20 954
在已有的项目中新增iconfont字体图标
在已有iconfont项目上添加新的iconfont图标svg
最新发布
01-03
### 如何在现有 IconFont 项目中添加新的 SVG 格式图标 #### 进入 IconFont 页面并创建或选择已有项目 为了向现有的 IconFont 项目增加新图标，需先访问 [iconfont.cn](https://www.iconfont.cn/) 网站[^1]。登录...
将阿里iconfont下载后包含多个svg图标的文件转换为单个svg文件
05-23
首先，确保已安装Node.js，并在命令行中进入项目目录： ```bash cd iconfont-svgs2svg-master ``` 然后，我们需要安装项目依赖，通过运行以下命令： ```bash npm install ``` `iconfont-svgs2svg`工具的使用方法...
首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标
07-07 4604
1.下载压缩包解析 2.修改图片中三个文件名字 修改前: 修改后: 3,把修改过的文件放入已经有的iconfont文件中 4. 把iconfont.css中内容引入原本文件
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5868
阿里图标库在旧有的iconfont中添加新的图标
iconfont怎么添加新的字体图标？
热门推荐
一入前端深似海的博客
01-12 2万+
因为项目新增功能需要加入新的iconfont图标，然而因为不知道原先所有iconfont文件所在项目不能整体重新下载，只好单独添加新的图标。 具体步骤见截图。 1----在iconfont官网找到对应要新增的图标（注销数据） 2----添加入库 3----修改下载到本地新的图标文件名称（必须改成和之前项目文件不一样的名字） 4----将修改好的新的图标文件（4个）已经
在已有的项目当中添加 icon font 图标
YZRHANYU的博客
10-07 1091
在已有的项目当中添加 icon font 图标
添加新的iconfont图标的方法（看了就会）
qq_30943255的博客
06-12 4906
一、用Unicode引入新iconfont图标 Unicode方法引入只需要保留下载的.tff、woff、woff2等字体文件，其他文件都是无关的 1.将阿里给的@font-face{…}复制到你项目使用的css文件下。 2.确保项目css文件中的url(…)能找到字体文件。 例： @font-face { font-family: 'iconfont'; src: url('iconfont.ttf?t=1623464492959') format('truetype'); } 定义
vue管理系统导航中添加新的iconfont的图标
qq_36164225的博客
05-06 570
3.如果和之前的iconfont有重复，那么就重新命名。2.下载的压缩包中，可以选择这两个，复制到项目目录中。6.在路由表中icon写上新iconfont名。1.在官网上将需要的图标，加入项目中，下载。4.将这里的.ttf文件，也重命名为自己的。5.在main文件中导入。
在已有项目上添加iconfont字体图标
weixin_46977882的博客
10-08 370
步骤三、如果下载的是svg文件需要在iconfont.js中加入新下载的iconfont.js中对应的<symbol></symbol>（不要全部替换，粘贴就行）并且粘贴iconfont.SVG文件到css\icon文件夹。步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-jindudengdai:before（不要删除原 有的@font-face）步骤二、粘贴以下三个文件到css\icon文件夹。注：svg下载symbol文件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值