阿里图标库iconfont下载和在旧有的iconfont中添加新的图标

最新推荐文章于 2024-08-17 21:52:26 发布
最新推荐文章于 2024-08-17 21:52:26 发布
阅读量4.5k 收藏 11
点赞数
分类专栏： Web前端 文章标签： 阿里图标库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherry_vicent/article/details/114384828
版权
本文介绍了如何从阿里图标库下载图标并将其整合到现有的iconfont项目中。首先，访问官网选择图标并下载代码包，然后将文件夹导入项目，使用iconfont.css。若需添加新图标，只需将新iconfont.css中除.iconfont外的代码粘贴到原有文件后面。
摘要由CSDN通过智能技术生成

一、阿里图标下载

1、访问阿里图标库官网：www.iconfont.cn，将喜欢的图标加入购物车

2、把需要的图标都加入到购物车后，点击右上角“购物车”，查看选好的图标

3、点击“下载代码”，将图标代码下载到本地

4、解压，然后把整个文件夹拷贝到需要用到的项目中

其中iconfont.css就是需要的图标样式。demo_index.html就是图标使用实例。

5、图标的使用方法

最低0.47元/天 解锁文章
cherry_vincent
关注
专栏目录
关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 2021
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
vue项目改图标_vue使用自定义icon图标的方法
weixin_39766071的博客
12-19 3631
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家效果图：推荐使用阿里爸爸矢量图标管理，iconfont使用方法 登录账号，找到需要的图标加入购物车然后添加到项目再然后下载代码到本地下载代码文件然后解压出现这列表打开HTML文件，引用方法教程补充我人的坑，之前想着在style标签里@import ""，结果一直报错，试...
iconfont-阿里巴巴矢量图标库使用总结
yangjie1404的博客
07-26 664
会得到一个压缩包，解压后，里面有demo样例,还有iconfont.css，iconfont.js和iconfont.ttf和 iconfont.woff 和 iconfont.woff2文件。把他们拷贝到项目中，如下图所示。然后打开iconfont.css如下图,其中的url括号里面的woff2文件和woff文件和tff文件路径需要替换成本地的文件，但是要注意:在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。然后在app.vue 中引入。
添加新的iconfont图标的方法（看了就会）
qq_30943255的博客
06-12 4531
一、用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'); } 定义
矢量图在线网站推荐
最新发布
weixin_45639224的博客
08-17 870
矢量图在线网站推荐
iconfont添加新图标_vue中使用iconfont和在旧有的iconfont中添加新的图标
weixin_30141959的博客
02-15 475
绘制图形与3D增强技巧(二)----直线图元一. glBegin(GL_LINES); glend(); 二.线带和线环 glBegin(GL_LINE_STRIP); glend(); glBegin(GL_LINE_LOOP); glend ...页面记载给绑定query的grid加filter功能名称:listDataAction 切入类型:before ...
Vue项目使用iconfont图标库时，添加新的图标时需要注意的问题
weixin_44956861的博客
06-22 4955
使用iconfont图标库时，添加新的图标时需要注意的问题 在项目使用时，我们时常需要添加新的小图标，这时我们就会遇到很多问题 1.我们需要替换哪几个文件？ 由图可见我们需要保留5个文件（后面发现.woff2其实不需要保留） 2.替换文件 打开Vue项目目录下src目录找到assets静态资源库，直接将文件复制替换即可(.woff2文件其实不用复制) 注意：千万不要替换iconfont.css...
使用阿里巴巴的iconfont图片库（下载到本地）
开发路上的AZhe
09-11 2782
1.登录，选择喜欢的图标加入购物车 2.添加至项目 3.修改项目设置 保存之后：下载至本地->解压 代码使用 <icon class="iconfont icon-caidan"></icon> 效果图：
iconfont将原有图标和新图标集合使用（原有图标中添加新图标）
weixin_44037153的博客
12-13 1572
iconfont将原有图标和新图标集合使用（原有图标中添加新图标） 1.将新图片图片转化为svg格式。 2.打开iconfont的图标处理网站。 https://icomoon.io/app/#/select 3.导入svg格式的新图标。 4.找到原图标文件，导入原图片。 导入后生成 5.进行下载图标操作。 下载后我们需要用到的文件为下面选框中的 6.将原来的下面框中的删除，将上面生成的fonts文件直接复制进去 7.用生成的style.css将原来的iconfont.css内容替换掉（注意
win8开始屏幕如何添加图标-.docx
09-27
完成这一步后，你将在开始屏幕上看到新添加的磁贴，代表了你刚刚固定的程序。 除了添加图标，你还可以根据需要从开始屏幕移除已固定的图标： 1. 在开始屏幕上找到你想要取消固定的图标，同样右键单击该磁贴。 2. ...
iconfont-recover:从原项目地址已丢失的 iconfont 项目的 svg 文件中抽取还原图标以建立新的 iconfont 图标库项目
05-28
（以下称）提供了方便的图标分享和管理功能，但是由于其图标项目独立于代码仓库，往往导致同一项目更换开发人员之后，接任者不能继续管理原来的图标库，给开发带来各种不便。 由于 生成的 svg 文件含有图标路径以及图标名数据，因此 (对于保留了此 svg 文件的项目)可以从此 svg 文件中提取出所有图标，然后上传至图标库，重新构建原来的项目。对于大部分以 font-class方式引用的图标库而言，新的项目基本可以代替老的项目直接部署到代码中；但对于使用 unicode方式引用的图标库而言，还需要修改 unicode 才可以部署。 使用方式 1. 环境要求 建议使用 windows ，安装支持 ES6+ 的 nodeJs 即可，Linux 下可能需要修改路径的分隔符； 2. 目录结构 |-- slice-svg.js |-- iconfont.svg |-- /output |- 3.
stm32最新下载固件库方法_2017_1_4
01-04
2017年1月4日的更新可能涉及了新的功能添加、性能优化或者对旧有API的改进。在本文中，我们将详细讨论如何获取并使用STM32的最新固件库。 首先，为了下载STM32的固件库，我们需要访问STMicroelectronics（意法...
如何在win7中添加快速启动项.pdf
10-08
在Windows 7操作系统中，微软对任务栏进行了重大改革，引入了多项新特性，如缩略图预览、跳跃菜单和升级的通知区域，这使得任务栏变得更加高效且用户友好。然而，传统意义上的“快速启动栏”被移除，取而代之的是...
Maven配置阿里云镜像、全局JDK、本地仓库
MrArgus的博客
03-12 3039
Maven配置阿里云镜像、全局JDK、本地仓库
想在原有的基础上，再次添加一些阿里图标的进坑
qq_44162778的博客
04-12 1863
1、首先去阿里巴巴图库找你喜欢的图标——添加入库 2、选择完所有需要的图标后，添加倒项目中 3、找到你的项目 点击下载到本地 4、下载完成进行解压，是这样色儿的！！ 因为在此次添加图标之前我们项目中是有图标的，所以我们只需要以下四个文件就可以了 注意：上图这四个文件的名字不要跟项目中本身iconfont的文件名字重复了哦，得修改成不一样名称哦 把文件拷进项目中这一步就可以了哦 别急还没完！！！别急还没完！！！ 5、把刚下载的哪个图标文件里面的json文件打开 把这一串儿放到之前项目iconfon
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5512
阿里图标库在旧有的iconfont中添加新的图标
iconfont Vue中使用
u014688172的博客
01-10 545
使用iconfont图标 标签名字一定要以iconfont开头 ...
SQLServer2005商务智能增强：数据仓库与工具革新
2. **数据处理**：旧有的“数据转换服务”（DTS）被重新设计，新的DTS（现称为IntegrationServices）提高了对大规模复杂数据集成、转换和合成的处理速度，增强了处理大数据的能力。 3. **分析服务**：...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值