阿里图标不能使用的情况解决

最新推荐文章于 2023-09-14 18:40:15 发布
最新推荐文章于 2023-09-14 18:40:15 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前端技术 知识积累 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D2742530275/article/details/110421230
版权

@[TOC]阿里图标不能使用情况解决

在f12中可以看到框，但是显示不出来图标

应该在icon官网上自己的的项目中添加了该图标，然后在下载到本地，添加到自己的项目中，方可使用。

需要加入以下的文件

在这里插入图片描述

使用iconfont时，使用的名称从iconfont.css中能找到，就可以使用

设置大小和颜色和设置字体一样

D2742530275
关注
专栏目录
想在原有的基础上，再次添加一些阿里图标的进坑
qq_44162778的博客
04-12 1851
1、首先去阿里巴巴图库找你喜欢的图标——添加入库 2、选择完所有需要的图标后，添加倒项目中 3、找到你的项目 点击下载到本地 4、下载完成进行解压，是这样色儿的！！ 因为在此次添加图标之前我们项目中是有图标的，所以我们只需要以下四个文件就可以了 注意：上图这四个文件的名字不要跟项目中本身iconfont的文件名字重复了哦，得修改成不一样名称哦 把文件拷进项目中这一步就可以了哦 别急还没完！！！别急还没完！！！ 5、把刚下载的哪个图标文件里面的json文件打开 把这一串儿放到之前项目iconfon
小程序以及h5引入阿里图标不显示最简单解决方案
weixin_43086811的博客
07-06 2048
小程序项目，按照老方法，图标部分手机不显示，经理炸毛，自己也头痛，网上搜了一大堆方法，有转化base64的，还有其他各种的，感觉太麻烦了也不好用，本人就讨厌麻烦，直男程序员一枚，今天花时间，认真研究了一下，发现这个方法兼容性最好，小程序上线半年了，也没有收到反馈看不见图标的，分享出来。 小程序以及h5引入阿里图标不显示最简单解决方案，亲测有效并用于方案。 第一步 小程序项目结构如图： 第二步 ...
iconfont 阿里巴巴矢量图标库 引入图标不显示
ChaoChao66666的博客
03-21 2974
问题： 在前端用如下代码引入iconfont时，发现图标没有被引入到界面中 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gengduo-shuxiang"></use> </svg> 原因： 可能是如下图所示导致的： 点击更新 将新的链接引入到前端中 ...
阿里图标在IE浏览器上不显示的问题
高彩琼的博客
03-11 712
问题描述： 在本地编辑器上用IE和谷歌浏览器上运行，阿里图标都显示，（排除了兼容性问题）。起服务运行时发现谷歌浏览器显示正常，IE浏览器上不显示。 报错如下： iconfont.eot @font-face 遇到了未知错误 iconfont.woff @font-face 未能完成WOFF 完整性检查 iconfont.ttf @font-face 遇到了未知错误 百度上有的方法尝试了一遍，问了所有认识的前端大佬，尝试了多种发方法，最后怀疑是文件内部下载到本地被损坏了，按照网上的办法重新打包转个字体格式.
uni-app 阿里字体图标真机运行时不显示问题
weixin_72329752的博客
04-18 601
但是直接把他作用到项目中时会发现，用真机运行项目图标不会出来。解决方法：在某个url地址最前面加上https:即可。
初学前端-记使用阿里图库SVG图标不显示的解决方法
zxc1207893278的博客
08-23 1665
使用VUE3+Element-Plus做来制作前端界面，做到左侧菜单栏时遇到了一个困难，添加的SVG图标始终不显示，位置存在，图标的信息也没有问题，但是就是一直显示不出来。的提示在Main.js中导入了inonfont.js文件后正常显示import './assets/fonts/iconfont/iconfont.js'的错误，但是不理解，不知从何下手。原来都是做上位机程序的第一次接触前端这种，感觉着实有些吃力，还有继续努力呀。其实在调试时浏览器中也报了。
2020阿里云产品图标.pptx
08-02
在阿里云产品图标大全中，我们还可以看到阿里云的各种解决方案，例如云基础应用、数据存储解决方案、安全解决方案等。这些解决方案为用户提供了全面的云计算能力和应用开发能力。 阿里云产品图标大全是阿里云产品和...
阿里云产品图标大全.zip
03-02
总之，"阿里云产品图标大全.zip"是一个宝贵的资源库，它包含了阿里云全系列产品的图标，为那些需要在设计和展示中使用阿里云元素的用户提供了一站式的解决方案。无论你是技术专家还是视觉设计师，这个压缩包都将极大...
阿里字体图标库使用规则
11-03
阿里字体图标库是一种高效、灵活的前端图标解决方案，尤其适合响应式设计和多终端兼容。以下将详细解释如何注册、下载及在项目中使用阿里字体图标库。 首先，访问阿里字体图标库的官方网站：...
阿里字体图标使用方法与兼容IE处理方案
06-08
阿里字体图标是阿里巴巴团队开发的一款基于字体技术的图标解决方案，它允许开发者通过简单地引用CSS样式来使用丰富的图标集，极大地提高了网页设计的效率。本文将详细介绍如何使用阿里字体图标，并提供针对IE浏览器...
阿里图标使用iconfont不起作用_程序猿！uni-app引入阿里矢量图和一个简单的版本更新组件...
weixin_39915500的博客
11-25 545
uni-app引入阿里矢量图和一个简单的版本更新组件作者：刘杰引入阿里矢量图减少包体积：1. 在阿里巴巴矢量图标库选择需要的Icon图标添加到购物车。点击下载代码。2. 在uni-app项目下static文件夹下新建fonts文件夹并导入下载好的的矢量图标文件夹内的iconfont.css 、iconfont.eot 、iconfont.svg 、iconfont.ttf 、iconfont.wo...
阿里巴巴矢量图标（iconfont）添加后显示不出来的解决办法
weixin_42617604的博客
10-07 3万+
问题: 添加阿里巴巴矢量图标（iconfont）后页面内能看到但是显示不出来： 解决办法: 后面发现地址栏是file://文件打开： 这样是不行的，要使用 iconfont 要在本地的服务器打开才能看到 用git bush进入index.html的文件夹，然后输入 http-server 打开服务器： 再地址栏输入：127.0.0.1:8080 就能看到了 ...
vue项目打包后阿里图标库图标显示不正确问题
莫不静好
09-03 4701
vue项目打包后，在服务器显示图标不正确： - 本地效果如下 - 打包后放置服务器效果如下 试了多种方法无果后发现是和Element中图标冲突了-_-||| 因此把阿里图标放在element后引入： ...
在线 阿里矢量 失效 配置后仍不发显示 icon
xiaoheisboy的博客
04-07 378
阿里矢量 失效 按官网配置后仍不发显示 在官网中并未提及 的项目设置 中查看这里是否 与下文一致 出坑火箭🚀 1.打开官网 =》 项目 》该项目 项目设置 =》FontClass/Symbol 前缀 修改为 BDSC-BI 2.按教程设置 方可使用 在线图标 老铁 试一下是否成功 都👓完了，就👍1️⃣👇吧 ...
css引入阿里图标图标不显示,IE不显示加载iconfont阿里巴巴图标的解决方法
weixin_39522312的博客
08-03 1226
iconfont图标是阿里出品的一款字体图标工具，不得不说非常好用，速度快，图标资源多，是国内程序员不可缺少的工具之一。官网：https://www.iconfont.cn/iconfont图标截图iconfont加载方法第一步：拷贝项目下面生成的font-face@font-face{font-family:'iconfont';src:url('iconfont.eot');src:u...
Vue 使用 阿里巴巴 iconfont 没有显示问题
liulang1905的博客
05-19 1779
记录一次小坑，就是可能路径不对，需要放到public下 和 index.html同级就好了 <!-- 你的具体路径 这段在你的index.xml中引入，这里引入可以全局使用，如果单独页面也可以单独引入--> <link rel="stylesheet" href="/icons/iconfont.css"> <!-- 下载后的图标的class --> <span class="iconfont icon-zhankai"></span> 如
iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
记录和分享属于我的“IT”时光
04-11 6898
confont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
html引用阿里云矢量图标（不照搬官方，手把手教学）
热门推荐
04-04 11万+
如何使用图标呢？ 在官方使用的时候会提示教程，总共三种。 我说一下怎么使用他们，因为对官方的理解不是很透彻，搜了很多帖子，也都是照搬官方的。这里我自己读懂了。然后给大家分享怎么用。 矢量图标官网 1 首先我们实例用第三种。也就是 symbol引用 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具...
BUG：阿里巴巴图标库引入链接后，icon有时候会不显示的话svg下载到本地使用
最新发布
YiDabing9的博客
09-14 816
忽然icon图标就不显示，但是代码、icon链接地址都没有发生变化解决办法：将icon下载到本地，记住前后引用本地的名字要保持一直
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值