阿里巴巴矢量图标库踩坑

最新推荐文章于 2024-07-26 15:20:45 发布
最新推荐文章于 2024-07-26 15:20:45 发布
阅读量630 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44194491/article/details/105680253
本文介绍了解决login.html页面图标无法显示的方法。首先，可以尝试将图标文件下载到本地并在HTML文件中引用。其次，如果使用在线图标，确保在link标签中正确使用https协议。这两种方法都能有效解决图标显示问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在写一个login.html的网页的时候，图标无法显示


代码：
这是代码
在这里插入图片描述
解决：
1.将你的项目图标下载到本地
在这里插入图片描述
2.在你的编辑器中，引用就行了
在这里插入图片描述

效果：
在这里插入图片描述
这样就显示出来了

第二种方法：

直接引用

需要在你的link标签里加上https：
在这里插入图片描述
这样就可以用了

亲测有效：解决inkscape转换的svg图标，上传到阿里图标库不显示问题
k912120的博客
06-03 2906
近期项目需求，需要把UI设计的图片转为图标，且合并到阿里现有的项目图标中。 踩坑：试了好多次，SVG上传到阿里图标的都是空白的; 注意：别用网上在线转SVG的图标，试了好多上传时都是空白 实现方案： 1.准备好图片转换工具inkscape； 2.登录阿里图标； 1.inkscape 0.92.3的中文版安装教程如下： 百度网盘： https://pan.baidu.com/s/1sVzQiKcrXZf1SO93rU9Jmg 提取码：swxf 2.inkscape 0.92.3使用教程如
React Native告别图标体积大手动更换慢的噩梦：让图标更新像修改文字一样简单
最新发布
老猿阿浪的博客
05-13 2102
React Native告别传统图标体积大、手动更换慢、效率低的噩梦，用react-native-iconfont-cli实现一键更换、体积小、效率高的问题
iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
记录和分享属于我的“IT”时光。
04-11 7405
confont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
Iconfont-阿里巴巴矢量图标库（笔记）
小糖穿越火线
04-26 828
使用 用户在iconfont.cn可以下载，多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 注：图标下载在“我的项目”： 一、icon单个使用 下载格式包括：svg，png 二、使用 1、unicode引用 特点： 兼容性最好 支持按字体的方式去动态调整图标大小，颜色 不支持多色，单色的图标 注：sym...
使用iconfont 阿里巴巴矢量图标库
weixin_49393290的博客
11-22 214
是
Iconfont-阿里巴巴矢量图标库的使用
qq_45291805的博客
08-04 883
1.在iconfont图标库里面找到一个自己想要的图标——》加入购物车 2.在购物车中找到图标并加入项目（没有项目先新建项目，项目名与所需要引用的.html文件无关） 3.查看Font Class，并复制代码，在浏览器中打开得到一段代码 4.在VSCode里面新建一个.css文件，将浏览器中得到的代码粘贴进去并保存 5.在.html文件里面用link标签引入.css文件 （link rel=”stylesheet” href=”./test.css” ），引用一个i标签，将图标代码复制进去 （
【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!
极客小俊
01-26 4231
国内功能很强大且图标免费内容很丰富的矢量图标库!
微信小程序-仿盒马鲜生.zip
11-30
图标库Iconfont-阿里巴巴矢量图标库这个可以找到自己想要的几乎所有的小图标，十分方便。Easy Morkeasy-mock用于后台的模拟，得到JSON数据weui框架引入，例如个人信息界面，用weui可以很快很方便的做2.项目开发微信...
美食菜谱预览微信小程序源码分享
02-12
3. 图标库： [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork：用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，...
美食菜谱预览微信小程序源码
02-12
3. 图标库： [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork：用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，...
阿里巴巴矢量图标库（iconfont）使用（vue，小程序）
weixin_43677787的博客
01-12 799
1.阿里巴巴矢量图标库官网 https://www.iconfont.cn/ 2.搜索图标名称 3.找到图标–>鼠标移入后出现—>图片1–>点击加入购物车（图2）–>图3–>点击进入购物车–>点击添加到项目–>新建项目–>添加 4.点击Font class ->点击查看在线链接–>复制代码–>新打开网页复制进去代码 5.复制内容–>新建css文件（iconfont.css）–>粘贴–>修改–>url(‘
阿里巴巴矢量图显示失效问题——解决笔记
weixin_51973859的博客
02-28 4113
阿里巴巴矢量图显示失效问题——解决笔记 遇到的问题： 近期将h5页面嵌入某APP中，页面中使用的阿里巴巴矢量图显示不正常，显示一个框框里面一个叉叉 解决问题： 检查引用的iconfont.css里面是否有使用的icon图标，结果发现是有图标的，检查是否在h5页面里面引用了iconfont.css，结果发现也是正确引用了，然后我就很好奇为什么在PC端是正常显示，然后直接用移动端的浏览器，或者是在微信等分享给好友通过链接进入都是有icon的，但是偏偏在嵌入某APP里后，图标不能正常显示。（真是很气人，??
iconfont-阿里巴巴矢量图标库使用教程
张时贰的博客
12-27 1万+
iconfont-阿里巴巴矢量图标库使用教程 文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点： 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
iconfont-阿里巴巴矢量图标库使用总结
yangjie1404的博客
07-26 1548
会得到一个压缩包，解压后，里面有demo样例,还有iconfont.css，iconfont.js和iconfont.ttf和 iconfont.woff 和 iconfont.woff2文件。把他们拷贝到项目中，如下图所示。然后打开iconfont.css如下图,其中的url括号里面的woff2文件和woff文件和tff文件路径需要替换成本地的文件，但是要注意:在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。然后在app.vue 中引入。
iconfont-阿里图标库 的使用
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
05-15 2188
iconfont、at.alicdn.com/t/c、icon图标
iconfont-阿里巴巴矢量图标库的使用方法
热门推荐
woai_mihoutao的博客
03-21 1万+
官网:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具http://www.iconfont.cn 使用方法： 1.注册账号 2. 登录后可搜索自己想要的字体图标 3. 例如：搜索weibo 4.鼠标滑到自己想要的图标后，点击第一个购物车图形 5.可在右上方的搜索框搜索下一个自己想要的图标，并加入购物车。 6.选择完毕后，点击...
Iconfont-阿里巴巴矢量图标库 用 github账户无法登录
weixin_44552512的博客
12-09 1万+
今天跟往常一样登陆阿里巴巴矢量图标库，突然提示： There have been several failed attempts to sign in from this account or IP address. Please wait a while and try again later. 我干了啥？我啥也没干啊！望大神们解释下这是啥原因啊？ ...
总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~
止水Itachi
06-11 1万+
1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。 2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。 3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦 4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。 5、点开你的右上角购物车，选择“添加至项目”。 6、点击新建文件夹 7、随意命名，在这里我命名为“举例子”，然后确定。 8、未完待续，明天更新。。。 ...
iconfont阿里巴巴矢量图标库使用步骤
帅的博客
11-02 1138
iconfont阿里巴巴矢量图标库使用步骤 1.注册账号 2.选中图标，添加到购物车 点击购物车，将图标添加到项目 3.在我的项目中，点击下载至本地 4.解压download.zip压缩包，并将解压出来的文件名改成font 5. ...
微信小程序商城开发实践：阿姨帮案例分析
其次，图标库是Iconfont-阿里巴巴矢量图标库，这个可以找到自己想要的几乎所有的小图标，十分方便。后台模拟工具是Easy Mork，用于后台的模拟，得到JSON数据。框架引入是weui框架，例如个人信息界面，用weui可以很快...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值