怎么在已有的iconfont图标中添加新的字体图标

最新推荐文章于 2024-05-17 11:23:30 发布
最新推荐文章于 2024-05-17 11:23:30 发布
阅读量4.1k 收藏 9
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45946340/article/details/103973032
版权

简单粗暴直接上菜：

  1. 在iconfont官网找到你需要的图标并且加入购物车

在这里插入图片描述

  1. 解压下载好的文件并修改其文件名

在这里插入图片描述

  1. 修改好之后把文件放到原来旧字体图标存放的位置

在这里插入图片描述

  1. 将新下载好的iconfont.css中的内容复制到旧字体图标iconfont.css的文件中，并修改其url中的路径地址

在这里插入图片描述

4.保存，over。

眼小博
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 1910
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
webpack中使用iconfont字体图标的方法
08-27
下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5298
阿里图标库在旧有的iconfont中添加新的图标
在已有的iconfont图标中添加新的字体图标
基咯咯
09-17 5065
由于项目需要，需要在现有的iconfont图标中再添加一些新的图标字体，而且还需保留原先的图标。 一开始的想法是看能不能直接在原先的图标文件中添加代码，后来发现不行。 其实，只要去iconfont官网中找到自己想要图标下载： 然后下载代码： 接着对现有的代码文件名进行修改，目的就是为了不覆盖原先的图标字体文件。 修改后如下（文件名可以自己定义）： 然后修改iconfont_sunburst.css文件中的路径名，将相关的路径名设置为你修改的文件名： 最后，直接在需要使用
在原有的项目上添加新的iconfont图标
最新发布
weixin_46112174的博客
05-17 749
在原有的项目上添加新的iconfont图标,超详细步骤~
iconfont怎么添加新的字体图标？
Harley567
02-13 694
iconfont怎么添加新的字体图标？
字体图标的追加
qq_51412866的博客
07-16 274
第八步将原来的压缩包替换成新的压缩包，把fonts文件复制到要用的文件的同一根目录下。第三步在弹出的窗口中找到原本的icomoon文件中的selection.json文件。第一步打开icomoon的主页，点击icoMoonApp。第九步从新文件的style.css文件中复制字体声明使用。第六步点击generateFont。第二步点击Importicons。第七步点击Download。第五步选择要追加的图标。...
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4034
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
Android中正确使用字体图标(iconfont)的方法
09-01
IconFont字体不仅仅流行于Web开发，在移动开发中也渐渐的使用的范围更广泛。这篇文章主要介绍了在Android开发中使用icon font的代码和方法。对大家学习使用iconfont有一定的参考借鉴价值，有需要的朋友们下面来一起...
iOS中如何使用iconfont图标实例详解
08-27
iconfont大家在开发中应该会经常用到，下面这篇文章主要给大家介绍了在iOS中如何使用iconfont图标实例的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
iconfont字体图标.pdf
06-27
iconfont介绍 （1）意义：使用字体用HTML代码以文本的形式直接在网页中画icon小图标。 （2）为什么使用icon字体...（7）本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序中使用它们。
添加新的iconfont图标的方法（看了就会）
qq_30943255的博客
06-12 4230
一、用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和在已有iconfont文件中新增不同iconfont项目图标
07-07 4037
1.下载压缩包解析 2.修改图片中三个文件名字 修改前: 修改后: 3,把修改过的文件放入已经有的iconfont文件中 4. 把iconfont.css中内容引入原本文件
如何不通过iconfont项目向已有字体图标中添加新的字体图标
赵天铭的博客
11-29 3371
前言 今天接到一个需求，要往项目中添加一个字体图标。按照以往的惯例，就是在iconfont网站的我的项目添加需要的字体图标就行了。但这个需求是个临时需求，不想用这种方式。 于是，就想直接在现有的字体图标中添加。 解决方案 第一步 在iconfont网站找到你需要的字体图标，将其添加到购物车中。然后，打开你的购物车，选择下载代码 第二步 解压下载的文件包，如图 第三步 将其中以eot/svg/t...
iconfont 在原有的图标中，增加新的图标
热门推荐
别皱眉
11-28 2万+
第一步 下载样式 http://www.iconfont.cn/ 选择图表，点击加入购物车 第二步 解压下载文件到项目 css中 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face 拷贝到原 iconfont.css 中 第五步 .icon-icongerenjishiben:before { content: “\e6a3”; } .ico...
iconfont将原有图标和新图标集合使用（原有图标中添加新图标）
weixin_44037153的博客
12-13 1536
iconfont将原有图标和新图标集合使用（原有图标中添加新图标） 1.将新图片图片转化为svg格式。 2.打开iconfont的图标处理网站。 https://icomoon.io/app/#/select 3.导入svg格式的新图标。 4.找到原图标文件，导入原图片。 导入后生成 5.进行下载图标操作。 下载后我们需要用到的文件为下面选框中的 6.将原来的下面框中的删除，将上面生成的fonts文件直接复制进去 7.用生成的style.css将原来的iconfont.css内容替换掉（注意
iconfont图标如何在vue中使用
04-01
1. 安装iconfont图标库 首先需要在iconfont官网下载需要使用的图标库，并将其导入到项目中。这里以阿里巴巴矢量图标库为例，下载完成后会得到一个名为“iconfont”的文件夹，将其复制到项目的public目录下。 2. 在main.js中引入iconfont图标库 在main.js中，我们需要引入iconfont图标库并将其挂载到Vue实例中。具体代码如下： ``` import Vue from 'vue'; import App from './App.vue'; import './public/iconfont/iconfont.css'; // 引入iconfont图标库 Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app'); ``` 3. 在vue组件中使用iconfont图标 在vue组件中使用iconfont图标需要先在html中创建一个标签，然后将需要使用的图标类名赋值给该标签的class属性。 例如，我们需要使用阿里巴巴矢量图标库中的“搜索”图标，其类名为“icon-search”，则在vue组件中使用该图标的代码如下： ``` <template> <div> <i class="iconfont icon-search"></i> </div> </template> ``` 注意，由于使用了iconfont图标库，需要将该标签设置为“i”标签。同时，需要将图标的类名添加到“class”属性中。 4. 样式调整 使用iconfont图标时，可以通过修改css样式来调整图标的大小、颜色、旋转等。 例如，要将搜索图标的大小调整为30px，颜色调整为红色，代码如下： ``` <template> <div> <i class="iconfont icon-search" style="font-size: 30px; color: red;"></i> </div> </template> ``` 通过在标签内部添加style属性，可以直接对图标进行样式调整。 以上就是在vue中使用iconfont图标的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值