首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标

已于 2023-08-01 15:11:44 修改
阅读量4.4k 收藏 11
点赞数 6
分类专栏： 后台管理系统 文章标签： vue.js
于 2021-07-07 18:09:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/men_gqi/article/details/118554058
版权
本文介绍了如何在项目中添加和使用Iconfont，包括font-class引用的两种方法，以及解决可能出现的问题，如图标上出现斜线。此外，还详细阐述了如何在已有Iconfont文件中新增不同项目的图标，涉及文件的替换和CSS内容的整合。
摘要由CSDN通过智能技术生成

文章目录

首次添加iconfont

  • font-class 引用方法一

1. 点击下图连接保存css文件到本地，让后引入

在这里插入图片描述
在这里插入图片描述

2. 使用

在这里插入图片描述

  • font-class 引用方法二

1. 设置带颜色图标

在这里插入图片描述
在这里插入图片描述

2. 之后下载文件包到本地

在这里插入图片描述

3. 引入项目 如果是veu可以把解压后文件放在public文件目录下，使用link标签引入html中

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

可能有的问题

1. 如下图图标上出现斜线，应该是设置了默认样式，注释即可

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在已有iconfont文件中新增不同iconfont项目图标

1.下载压缩包解析
2.修改图片中三个文件名字

修改前:
在这里插入图片描述
修改后:
在这里插入图片描述

3,把修改过的文件放入已经有的iconfont文件中

在这里插入图片描述

4. 把iconfont.css中内容引入原本文件

在这里插入图片描述
在这里插入图片描述

大白菜1号
关注
专栏目录
关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 2055
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
通过设置createFromIconfontCN使Vue3项目支持iconfont图标库
青年码农
01-05 1616
本教程讲解的是基于Vue3和Ant Design Vue，前面讲了Vue3项目动态引入iconfont（阿里巴巴矢量图标库），这种这种写法只适用部分情况，现在我们又有了一个新的需求，就是在菜单里面使用iconfont图标，Ant Design Vue在 1.2.0 之后，使用了 SVG 图标替换了原先的 font 图标，之前a-icon这种写法已经在新的版本中不适用了，就...
在已有iconfont项目上添加新的iconfont字体图标
weixin_51765549的博客
12-29 1341
步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-guanbi::before(注:原有的不要删除@font-face只是新添加的)
iconfont图标字体库详细介绍
最新发布
Jinuss的博客
09-03 1289
iconfont的使用方式，最详细的教程
在原有的项目上添加新的iconfont图标
weixin_46112174的博客
05-17 1705
在原有的项目上添加新的iconfont图标,超详细步骤~
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4769
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
在已有的项目当中添加 icon font 图标
YZRHANYU的博客
10-07 994
在已有的项目当中添加 icon font 图标
项目新增iconfont字体图标
lv_qingru的博客
02-20 829
在已有的项目中新增iconfont字体图标
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
weixin_35668334的博客
01-14 553
前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站，可以下载/在线编辑/上传自己需要的矢量图标，也支持团队协作，那么在mpvue项目中如何引入呢？将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车图标，此处我们选第三个ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等，此处我们选择加入项目并下载代码文件解压一般网页中为了兼容性考虑，我...
想在原有的基础上，再次添加一些阿里图标的进坑
qq_44162778的博客
04-12 1897
1、首先去阿里巴巴图库找你喜欢的图标——添加入库 2、选择完所有需要的图标后，添加倒项目中 3、找到你的项目 点击下载到本地 4、下载完成进行解压，是这样色儿的！！ 因为在此次添加图标之前我们项目中是有图标的，所以我们只需要以下四个文件就可以了 注意：上图这四个文件的名字不要跟项目中本身iconfont的文件名字重复了哦，得修改成不一样名称哦 把文件拷进项目中这一步就可以了哦 别急还没完！！！别急还没完！！！ 5、把刚下载的哪个图标文件里面的json文件打开 把这一串儿放到之前项目iconfon
iconfont 怎么添加新的图标
05-02 1731
1、官方添加新的图标到购物车里面，然后“下载代码”： 2、下载，解压，在 assets 中新建一个 fonts2 的文件夹，用来存放后来下载的图标字体文件。对比之前的 fonts 下面的文件： 注解： 后来下载的字体图标文件，主要查看 iconfont.css 里面@font-face 里面主要引用了哪些文件，然后把这些文件重命名（主要是防止和之前 fonts 下面的文件名冲突），全部拷贝到之前 fonts 文件夹下面。 然后把后来下载的iconfont.css 里面@f...
iconfont怎么添加新的字体图标？
热门推荐
一入前端深似海的博客
01-12 2万+
因为项目新增功能需要加入新的iconfont图标，然而因为不知道原先所有iconfont文件所在项目不能整体重新下载，只好单独添加新的图标。 具体步骤见截图。 1----在iconfont官网找到对应要新增的图标（注销数据） 2----添加入库 3----修改下载到本地新的图标文件名称（必须改成和之前项目文件不一样的名字） 4----将修改好的新的图标文件（4个）已经
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5575
阿里图标库在旧有的iconfont中添加新的图标
vue项目在原有使用了iconfont的项目中添加新的图标字体
m0_57399020的博客
04-23 386
项目中添加新的iconfont
在原有项目添加一个新的icon图标
murongyuyao的博客
02-25 2245
在原有项目添加一个新的icon图标第一步 找到原有图标所在的位置第二步 在阿里巴巴矢量图标库中下载第三步 将先下载的代码复制到项目中 第一步 找到原有图标所在的位置 如： 第二步 在阿里巴巴矢量图标库中下载 图标库地址：https://www.iconfont.cn/ 在矢量图标库找到自己要新增加的图标，添加到购物车之后，选择下载代码 如： 第三步 将先下载的代码复制到项目中 1.解压下载下来的压缩包，然后找到iconfont.css这个文件，将@font-face这一段复制到原来的icon
添加新的iconfont图标的方法（看了就会）
qq_30943255的博客
06-12 4587
一、用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'); } 定义
在原有的iconfont.css文件中加入新的字体图标
qq_42858057的博客
07-05 1408
在阿里图标库中，如果你没有这个字体图标的线上项目，那么你怎么在本地项目中的原始图标文件中添加新的图标呢？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大白菜1号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值