解决iconfont 只显示小方框的问题

最新推荐文章于 2024-02-17 19:11:30 发布
最新推荐文章于 2024-02-17 19:11:30 发布
阅读量1.1w 收藏 17
点赞数 11
分类专栏： 复习曾经学过的
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43779011/article/details/106502554
版权

将自己需要的图标加入到购物车，随后添加到创建的项目中

## 在iconfont中
在这里插入图片描述

css引入

http://at.alicdn.com/t/font_1858400_ymr5z8mnbsf.css

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1858400_ymr5z8mnbsf.css">

<i class="iconfont icon-jzanhao"></i>

前边的iconfont一定要有，后面是上图框中的。如果不加前面的iconfont，否则就只显示小方框，没有图标。

vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 6147
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
前端学习（224）:iconfont矢量库
歌谣的博客
12-26 393
矢量库 一、如何下载iconfont图标。 在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。 鼠标悬浮上后会出现三种选择： 1.添加入库：功能和淘宝中的购物车一样，可以添加多个图标进行操作。. 2.收藏：...
在vue3中应用iconfont图标，使用iconfont出现方框怎么解决
最新发布
ZYXKN的博客
02-17 1660
在实际的开发中，经常需要用到一些icon图标，一些ui框架有提供icon图标，但是数量总有穷尽的时候，而且有些图标并不能满足你的要求，此时就需要用到iconfont这个网站了，里面提供了很大icon图标还有很多使用方式 图片、svg、Font class、Unicode、Symbol。
iconfont字体图标引用出现框框问题解决办法
qq1722377628的博客
11-18 7302
问题描述： 编译完全没问题，控制台也出现了使用的iconfont类及unicode编码（这里我使用的是unicode编码，使用iconclose类也是同样的结果） 解决思路： 由于在看视频做这个项目时使用的是stylus语法，我怀疑是把下载下来的css样式改为stylus导致出现这个bug，所以我一狠心，改回了css语法，问题解决！ PS： 另外我在网上查询这个问题时，发现出现这种问题的原因是多种...
vue 中使用iconfont（阿里巴巴图标库），解决iconfont 只显示小方框的问题
xuerwang的博客
07-26 2万+
1、用github账号或其他支持的账号登陆iconfont官网http://www.iconfont.cn/ 2、登录后寻找所需的图标加入购物车 3、进入购物车，下面选择添加至项目，如果没有先新建 4、添加后选择下载至本地下载font文件。这是我下载的font文件列表。 5、将下面带有icon font字样的文件放入系统文件夹中。 6、main.js中引入iconfont.css   ...
iconfont图标只显示方框的其中一种可能性
demonic_yang的博客
09-10 2089
项目场景： layui自带图标库不够用，需扩展，故考虑引入iconfont。 官网：www.iconfont.cn 问题描述： 按照官方文档引入后，发现图标不显示，只显示了一个方框。 官方三种使用方式，Unicode和Font Class均显示方框，Symbol可以正常显示。 引入路径无问题，使用方式无问题。 引入方式网上很多，在这里不赘述了。 解决方案： 偶然发现别人的iconfont.css中比我多了两行URL，去官网查看后，发现我的项目设置中勾选了【彩色】 去掉彩色，勾选EOT和SVG，重新下载
解决iconfont下载的图标显示的是小方框
Sara0064的博客
01-03 7758
嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。 第一步，我们先从iconfont粘贴一个线上链接。 粘贴到项目中 将图标名称粘贴到需要的位置 结果我显示的图标是 那么怎么解决呢。 然后在我们vue3项目中public中Index.html中引入 这么做之后我们打开 binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加
CSS 背景图标（雪碧图、精灵图、iconfont）
Ares5k
04-12 1644
雪碧图（精灵图）、iconfont
Vue2.x中利用@font-size引入字体图标报错的解决方法
10-17
2. 不报错但显示为小方框：这种情况可能是因为浏览器无法正确加载字体文件，或者字体文件与CSS样式文件没有正确关联。在控制台可能会看到警告信息，提示字体文件未找到或加载失败。这可能是由于以下原因： - 没有在...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6943
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
Vue 导入 iconfont图标显示方块
qq_36229552的博客
03-18 1103
琢磨很久，都不知道哪里有问题，然后重新写和粘贴代码走了一遍 把iconfont图标，放进自己新建的iconfont.css里面 iconfont.css内容 @font-face { font-family: "iconfont"; src: url('//at.alicdn.com/t/font_2429860_od9norre75.eot'); src: url('//at.alicdn.com/t/font_2429860_od9norre75.eot?#iefix') f.
微前端qiankun嵌入vue项目后iconfont显示方块
次顶级的博客
11-07 472
（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）解决方法：修改iconfont.css文件的woff2的url将，修改未base64。打开代码链接地址 复制替换项目中的iconfont.css。以上 👆 是个人前端项目，欢迎提出您的建议😊。以上 👆 是个人前端项目，欢迎提出您的建议😊。SubTopH前端开发个人站。在阿里图库的 点击生成代码。base64代码生成获取。
vue使用iconfont 及出现方框解决
qq_50962973的博客
11-04 1768
VUE引入iconfont 下载本地后放入vue项目中 在main.js中导入 如果出现图标显示方框的话 在下载好中的iconfont.css配置一下 把里面的iconfont改成icon即可
iconfont本地引入显示小方块问题
weixin_44705310的博客
09-03 1952
问题： 本地引入icon，再次在项目中添加新的图标，重新下载文件，引入后页面图标都显示小方块。 解决方法 如图：将此段代码重新生成一下，复制到iconfont.css文件中。
引入iconfont出现小框框
李小二的博客
03-27 8016
**问题：**在引入iconfont出现小方框的问题有很多，我遇到的是其中一种； **原因：**我这边出现这种情况的原因主要是如下图，base64数据不正确 **解决方法：**把能使用iconfont的同事的文件拿过来，把base64数据替换调 ...
Vue项目中引入iconfont 图标库 和 图标显示成小方块的问题解决
热门推荐
Jackshijin的博客
10-15 3万+
这两天弄了个vue的小demo ，引入了iconfont 的图标，没想到是噩耗的开始，一直显示的是小方块，一步步排查踩坑把问题解决。 首先看看官方对项目引入iconfont 的介绍。 unicode引用 unicode是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持ie6+，及所有现代浏览器。 支持按字体的方式去动态调整图标大小，颜色等等。 但是因为是字体，所以不支持多色。只...
uni 加入图标_uni-app引入iconfont字体图标
weixin_39791152的博客
12-19 234
1 首先进入你的iconfont项目很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目,解压完就是这个了 ,然后把圈起来的放到你的项目文件里面 ,记得引入的时候路径别错了,随便放,引入路径对了就行进入这个网站, 然后把刚刚解压的文件打开 找到找不到?打死你 重新去官网下载,然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf点击...
vue项目中iconfont引入只显示方框
m0_50981596的博客
03-30 1355
问题 今天的项目字体图标这一步疯狂出错，总结一下字体步骤。 1. 先按照网上的方法 第一步：拷贝项目下面生成的 @font-face @font-face { font-family: ‘iconfont’; src: url(‘iconfont.eot’); src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’), url(‘iconfont.woff2’) format(‘woff2’), url(‘iconfont.woff’) form
iconfont通过font class引入显示小方块bug
a1071626267的博客
09-29 1099
iconfont通过font class引入显示小方块bug
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值