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

最新推荐文章于 2023-03-08 10:49:07 发布
最新推荐文章于 2023-03-08 10:49:07 发布
阅读量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'),
  • 位置
    在这里插入图片描述
  • 可以了
    在这里插入图片描述
阿里巴巴iconfont使用字体图标的方法
爱吃草莓蛋糕的猴博客
08-03 940
目录1.下载图标2.把图标引入html文件中。**（这里是Unicode的用法）**（这里是Font class用法） 阿里的iconfont下载一些小图标很方便，而且也是免费的，图标下载应该都会，这里小介绍一下怎么使用字体图标。也就是说，不再是作为图片来使用，而是作为字体，可以改变颜色大小都不会失真。 1.下载图标 1.打开百度搜索iconfont inconfont链接：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 戳
​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）
bing103425的博客
07-25 2481
1.打开iconfont，并登录账号 http://www.iconfont.cn/     2.挑选自己喜欢的图标，加入购物车       3.打开购物车 => 添加至项目 => 新建项目目录 => 确定         4.进入我的项目，点击Symbol，点击生成代码       5.将生成的代码引入index.html ...
base64的转码设置 charset=utf-8；
热门推荐
web修理工
09-10 6万+
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 1460
我们现在iconfront 中下载下来需要的图标。下载解压后的文件如下。 第二排的文件( 和第一排的.woff2 )，是我们要放到项目中去的。 那么，我们首先在项目目录的src/statics 下，创建一个目录 iconfont，然后把第二排的文件拖进来。 然后，我们需要改一下其中的iconfont.css 文件，把里面字体的路径改成相对路径。如下。 @font-face {font...
解决uniapp引入字体图标不显示问题
weixin_48658667的博客
05-26 4111
1 不显示示例 不显示时iconfont.css文件核心代码 第一种情况（下载后的默认代码） 第二种情况 2 解决办法 将上图示核心代码替换为（注意括号内前后都有单引号）： src: url('data:application/x-font-woff2;charset=utf-8;base64, AAEAAAALAIAAAwAwR.....'); /*AAEAAAALAIAAAwAwR...... 是base64解码内容*/ 3 解码方法 移步 base64对iconfont.tt
阿里字体小图标的使用
一只前端小菜鸟
03-26 7401
在项目开发中，我们难免会用到一些图片之类的样式，但是图片本身体积大，而且更改样式和其他标签融合布局相对麻烦，那么有没有更好的办法呢？ 字体小图标解决了我们这个问题。 我们这次就说说常见的阿里字体小图标的使用 官网地址：阿里字体小图标官网 使用步骤： 进入阿里字体小图标官网，注册登录（推荐使用微博登录，懒得注册） 搜索自己想要的图标加入购物车 在右上角的购物车图标那一栏可以看见自...
WEB前端--CSS学习笔记（五）
qq_39953312的博客
04-30 533
1.多列（分栏） 1）column-count 规定元素应该被分隔的列数（栏数）。 column-count: number|auto; 2）column-gap 设置栏间距。 column-gap: length|normal; 3）column-rule 设置栏间分隔线。 a)column-rule-style：设置线型。 none 没有分隔线 hidden 隐藏线 ...
如何使用阿里巴巴iconfont图标库为html网页中的标题前添加图标
EarthTomorrow的博客
02-12 2017
制作网页时常遇到需要给标题之前增加示意图标，以提高阅览者认知的情况，本文将讲解如何利用阿里巴巴矢量图标库中的图标资源，为网页中的标题增加图标。 下载图标资源 首先在浏览器中搜索iconfont，并登陆阿里巴巴矢量图标库官方网站，（首次使用需要注册），然后在搜索框搜索需要的图标，选择合适的图标，点击购物车图标加入购物车，此时发现页面右上角购物车中会实时显示已经加入购物车的图标数量，添加了足够的图标...
阿里图标库iconfont下载和在旧有的iconfont中添加新的图标
cherry_vicent的专栏
03-05 4665
一、阿里图标下载 1、访问阿里图标库官网：www.iconfont.cn，将喜欢的图标加入购物车 2、把需要的图标都加入到购物车后，点击右上角“购物车”，查看选好的图标 3、点击“下载代码”，将图标代码下载到本地 4、解压，然后把整个文件夹拷贝到需要用到的项目中 其中iconfont.css就是需要的图标样式。demo_index.html就是图标使用实例。 5、图标的使用方法 二、在原来的iconfont图标中添加新的图标 将新的iconfont.css中的除.ic
Flutter-自定义图标-iconfont 阿里巴巴
最新发布
m0_48259951的博客
03-08 1918
虽然Flutter有许多内置的icon图标，但是有些特殊功能的话，需要自定义图标或者需要在。后，会生成一些不同格式的字体文件，在Flutter中，我们使用。文件其实是用不到的，只是为了能更便捷的看到每个字体对应的。定义多个字体文件，步骤都是一样的，只不过是把解压文件里的。：下载下来解压后的文件，在项目的根目录下新建一个。目录下新建一个自定义字体文件，我这里的命名是。文件，与已引入的字体文件名做区分，在。配置，引入自定义文件，这里首个。，也可配置多个字体，替换不同。文件夹，把解压文件里的。
css 中引入第三方字体
文摘资讯
01-09 1516
CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。font-face属性介绍及其实例：对浏览器的支持：Firefox、Chrome、Safari 以及 Opera 支...
uni-app中使用iconfont
weixin_43837268的博客
02-02 354
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 2931
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 3165
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 在原有的图标中，增加新的图标
别皱眉
11-28 2万+
第一步 下载样式 http://www.iconfont.cn/ 选择图表，点击加入购物车 第二步 解压下载文件到项目 css中 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face 拷贝到原 iconfont.css 中 第五步 .icon-icongerenjishiben:before { content: “\e6a3”; } .ico...
阿里图标库的基本使用
junshangshui的专栏
08-29 4万+
一、进入阿里图标库官网站：http://www.iconfont.cn 二、选择想要的图标加入购物车(如果不想以unicode方式使用图标，那直接下载png等格式即可) 三、然后进入购物车点击下载代码   四、解压后，选择这下图五个文件复制，其它的是demo文件，告诉我们如何使用。   五、我在项目的assets目录下新建了个fonts目录来放这五个文件   六、打...
iconfont怎么添加新的字体图标？
一入前端深似海的博客
01-12 2万+
因为项目新增功能需要加入新的iconfont图标，然而因为不知道原先所有iconfont文件所在项目不能整体重新下载，只好单独添加新的图标。 具体步骤见截图。 1----在iconfont官网找到对应要新增的图标（注销数据） 2----添加入库 3----修改下载到本地新的图标文件名称（必须改成和之前项目文件不一样的名字） 4----将修改好的新的图标文件（4个）已经
阿里巴巴矢量图标库(iconfont)在项目中添加新的字体图标
笑到世界都狼狈的博客
08-05 3923
首先项目接手的时候里面就下载好了阿里巴巴的字体图标，由于功能的新增，需要重新添加字体图标，但是我看代码，每个图标都对应一个值，就不懂到底要怎么修改，后来百度找到一遍文章写的很详细，很好，所以直接上链接，方便以后自己用到了找不到 原文章链接：https://blog.csdn.net/qq_37487885/article/details/79042354 写的超级详细，希望也可以帮到需要用到的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值