阿里巴巴iconfont加入新的图标如何操作

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

官网：阿里巴巴图标库

  • 将图标加入购物车
  • 添加至项目，单独下载也可，创建项目是为了方便管理
    在这里插入图片描述
  • 再次下载
    在这里插入图片描述
  • 这4个字体文件把原项目中的替换掉
    在这里插入图片描述
  • iconfont.css文件中的base64编码的url替换掉原来的
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPEAAsAAAAAB/QAAAN2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDDIJYATYCJAMUCwwABCAFhG0HTRvpBsgehXEbHYpTqaxs333Ew//v92ufK5+HaYMk3ui+OklXxxOJZpJ0puUpeULxEt7/6dQvDABdSpPNW4FZkU+yYpCedCpgmEsIUwimAm7NVpqSnLvB//+90/9/ZQnMa89yWXPQHNQJMA4oy/am+hRYgAUSmDeM3UR5ELcJ9JhiQW3PXrgSQhVgUSAuFFmA0JRRqckPjdAp2Vkg3oHTpEq6HcAb/378B1eEgqRmACt3jmZ5YOqvsJ+fmIKRAhspBqLx7ND2kbEMFOKy1HmBCZPLGD3OeNY60KORpLGGJf68+PPTSEss3ZG6ByqN8cdLCtEBkNsH1sVU4VcYRmR+JSKCXxcRiV+fxC+msoIetKxT4DsA+jRHyLIuR4onJcWGJW7Bsjg4uHpoaM3AwKr+/s1IvjLgJ99ncHATbi24WJUstRVeqZblA23JyW1tiZ6WgiTceiAl5cCB5C1swbOIuOoXGdzh5+Nizz4V7vUUdFf1FvYp0W2HU9bcqLZOO/Qgg5+wrvXg/qVFZ/echxveU8zAIHMS8qj8lMoT7exJNi46ebOEvnmTKYEjbtwspYvpWzfpEoEnjdZsScmHMtwZh5KSDqerG2HLdVPT6Imrh/GbUQ8fjgonj73Bw6snjoKprzXpcelcWlxYTWhcAdcQu3JOg7RSfuZrzombp9YvfnZgzYElb1/d2/E/d3bugd3jT8IOgFS+oVcCtPI7RgBoS3+ZWQDtzHP6/a/7jcOH322Jmfg7NIIF+Jm24AwPtAr0E75/ldaiHyVq2VFcCTDVYrdioZ1drWC4XfE/afo93hEfx1GPt84lNMZjSLpMQtaYxgttGapeq9DRWIMeS+bs7zVKx4gSBiwqFSAMuQHJgB+QDenAC+0DVBN+QcdQMNBjNxJO7DUbSvgMHQsEe1DeTqSIalBCFhIe5C/HsukX9KSEM1Zj3VAiyGlzZDNzcBDrY6wxtskuQiQk6WoAzRbuw36/ijRdzccisXkJ0cbb7VLZi2yiGoBwW3SYgMA8kDw7IQqRKkiivYnw3OeXw2QmP4Fe09bhXg3TGZTBEScbRwt8jjLYqu1ayBi2kbkQhASR6FQByGzBjvlhUoVo5dPyYSLCxtsjrhnPLnWT2ipt86sDz7gPeoAzatAUQ7EUR/HQXClCUCZn8IZqGqbKS0LQayo8MbVCAwAAAA==') format('woff2'),
  • 位置
    在这里插入图片描述
  • 可以了
    在这里插入图片描述
ikun_rapper
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
base64的转码设置 charset=utf-8；
web修理工
09-10 4万+
Data URI，不是URL URL是uniform resource locator的缩写，在web中的每一个可访问资源都有一个URL地址，例如图片，HTML文件，js文件以及style sheet文件，我们可以通过这个地址去download这个资源。 其实URL是URI的子集，URI是uniform resource identifier的缩写。URI是用于获取资源，包括其附加的信息的一种协议。附加信息可能是地址，也可能不是地址，如果是地址，那么这时URI就变成URL了。注意的是data URI不是
使用iconfont 嵌入头部图标
purple_lumpy的博客
03-24 1409
我们现在iconfront 中下载下来需要的图标。下载解压后的文件如下。 第二排的文件( 和第一排的.woff2 )，是我们要放到项目中去的。 那么，我们首先在项目目录的src/statics 下，创建一个目录 iconfont，然后把第二排的文件拖进来。 然后，我们需要改一下其中的iconfont.css 文件，把里面字体的路径改成相对路径。如下。 @font-face {font...
在原有的项目上添加新的iconfont图标
最新发布
weixin_46112174的博客
05-17 775
在原有的项目上添加新的iconfont图标,超详细步骤~
解决uniapp引入字体图标不显示问题
weixin_48658667的博客
05-26 3989
1 不显示示例 不显示时iconfont.css文件核心代码 第一种情况（下载后的默认代码） 第二种情况 2 解决办法 将上图示核心代码替换为（注意括号内前后都有单引号）： src: url('data:application/x-font-woff2;charset=utf-8;base64, AAEAAAALAIAAAwAwR.....'); /*AAEAAAALAIAAAwAwR...... 是base64解码内容*/ 3 解码方法 移步 base64对iconfont.tt
WEB前端--CSS学习笔记（五）
qq_39953312的博客
04-30 466
1.多列（分栏） 1）column-count 规定元素应该被分隔的列数（栏数）。 column-count: number|auto; 2）column-gap 设置栏间距。 column-gap: length|normal; 3）column-rule 设置栏间分隔线。 a)column-rule-style：设置线型。 none 没有分隔线 hidden 隐藏线 ...
css 中引入第三方字体
文摘资讯
01-09 1462
CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。font-face属性介绍及其实例：对浏览器的支持：Firefox、Chrome、Safari 以及 Opera 支...
IconfontTool.7z 阿里巴巴iconfont 字体库，显示图标及相应的unicode 编码。 .NET 5平台
10-27
阿里巴巴Iconfont工具不仅提供了大量的图标库供选择，还支持自定义上传和管理图标，使得项目中的图标统一且易于维护。 .NET 5是一个跨平台的开发框架，它继承了.NET Core的特性并整合了.NET Framework的部分功能，...
新手阿里巴巴国际站操作新产品发布及后台管理.pdf
03-29
新手阿里巴巴国际站操作新产品发布及后台管理.pdf新手阿里巴巴国际站操作新产品发布及后台管理.pdf新手阿里巴巴国际站操作新产品发布及后台管理.pdf新手阿里巴巴国际站操作新产品发布及后台管理.pdf新手阿里巴巴...
阿里巴巴矢量图标批量下载 IconontDownload.js
09-04
如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
阿里巴巴电子商务操作宝典new.ppt
11-21
阿里巴巴电子商务操作宝典new.ppt
uni-app中使用iconfont
weixin_43837268的博客
02-02 315
1.app.vue中引入 <script> </script> <style> /*每个页面公共css */ @font-face {font-family: "iconfont"; src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANoAAsAAAAAB3gAAAMcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAq
uni-app引入iconfont App不显示H5正常问题
qq_24343389的博客
01-13 2768
1、iconfont 地址 https://www.iconfont.cn/ 2、引入方式 离线引入： 加入字体图标下载iconfont包 修改iconfont.css文件，data:application/x-font-woff2;charset=utf-8;base64,后面内容是下载的iconfont.ttf转为base64的内容 引入到uni-app项目中，并在App.vue页面引入 @import "./common/iconfont/iconfont.css"...
[nginx] Refused to load the font ‘data:application/x-font-woff；‘Note that ‘font-src‘ was not explici
qubes的专栏
10-09 2847
question Nginx添加CSP响应头设置之后报错： Refused to load the font 'data:application/x-font-woff;charset=utf-8;base64,d09G…’ because it violates the following Content Security Policy directive: “default-src ‘self’”. Note that ‘font-src’ was not explicitly set, so ‘def
iconfont怎么添加新的字体图标？
热门推荐
一入前端深似海的博客
01-12 2万+
因为项目新增功能需要加入新的iconfont图标，然而因为不知道原先所有iconfont文件所在项目不能整体重新下载，只好单独添加新的图标。 具体步骤见截图。 1----在iconfont官网找到对应要新增的图标（注销数据） 2----添加入库 3----修改下载到本地新的图标文件名称（必须改成和之前项目文件不一样的名字） 4----将修改好的新的图标文件（4个）已经
iconfont 在原有的图标中，增加新的图标
别皱眉
11-28 2万+
第一步 下载样式 http://www.iconfont.cn/ 选择图表，点击加入购物车 第二步 解压下载文件到项目 css中 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face 拷贝到原 iconfont.css 中 第五步 .icon-icongerenjishiben:before { content: “\e6a3”; } .ico...
iconfont 怎么添加新的图标
Wehter的博客
10-08 783
点这里看原文（拷贝一份的原因是防止博主删除，从而找不到资源） 1、官方添加新的图标到购物车里面，然后“下载代码”： 2、下载，解压，在 assets 中新建一个 fonts2 的文件夹，用来存放后来下载的图标字体文件。对比之前的 fonts 下面的文件： 注解： 后来下载的字体图标文件，主要查看 iconfont.css 里面 @font-face 里面主要引用了哪些文件，然后把这些文件重命名（主要是防止和之前 fonts 下面的文件名冲突），全部拷贝到之前 fonts 文件夹下面。 然后把后来下载的
想在原有的基础上，再次添加一些阿里图标的进坑
qq_44162778的博客
04-12 1756
1、首先去阿里巴巴图库找你喜欢的图标——添加入库 2、选择完所有需要的图标后，添加倒项目中 3、找到你的项目 点击下载到本地 4、下载完成进行解压，是这样色儿的！！ 因为在此次添加图标之前我们项目中是有图标的，所以我们只需要以下四个文件就可以了 注意：上图这四个文件的名字不要跟项目中本身iconfont的文件名字重复了哦，得修改成不一样名称哦 把文件拷进项目中这一步就可以了哦 别急还没完！！！别急还没完！！！ 5、把刚下载的哪个图标文件里面的json文件打开 把这一串儿放到之前项目iconfon

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值