iconfont字体图标引用出现框框问题解决办法

最新推荐文章于 2024-02-17 19:11:30 发布
最新推荐文章于 2024-02-17 19:11:30 发布
阅读量7.2k 收藏 1
点赞数
分类专栏： Vue 文章标签： vue iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40686529/article/details/103127944
版权

问题描述： 编译完全没问题，控制台也出现了使用的iconfont类及unicode编码（这里我使用的是unicode编码，使用iconclose类也是同样的结果）

解决思路： 由于在看视频做这个项目时使用的是stylus语法，我怀疑是把下载下来的css样式改为stylus导致出现这个bug，所以我一狠心，改回了css语法，问题解决！

PS： 另外我在网上查询这个问题时，发现出现这种问题的原因是多种多样的，所以我这里只适合这一种情况，具体还是根据实际情况来解决

问题图片：在这里插入图片描述
解决后的图片：
在这里插入图片描述

【已解决】react 简书项目，全局引用后iconfont图标变成方块问题
超逸の学习技术博客
10-13 1694
背景 最近，在做 react 简书项目时候，使用 iconfont 时，出现图标变成方块问题，想了想，应该没有什么问题啊，后面发现 styled-components 中创建全局样式替换成了 createGlobalStyle。 解决 createGlobalStyle 时，需要导出当前全局样例，例如我的 iconfont.js 文件代码如下： import { createGlobalStyle } from 'styled-components'; /* 使用 reset.css 设置默认样式*/ ex
vue开发移动端时，引入阿里矢量字体图标，显示为小框框的一种处理办法
weixin_68448431的博客
08-23 512
字体图标样式添加成功，显示为小框框
iconfont本地引入显示小方块问题
weixin_44705310的博客
09-03 1925
问题： 本地引入icon，再次在项目中添加新的图标，重新下载文件，引入后页面图标都显示小方块。 解决方法 如图：将此段代码重新生成一下，复制到iconfont.css文件中。
在vue3中应用iconfont图标，使用iconfont出现方框怎么解决
ZYXKN的博客
02-17 1462
在实际的开发中，经常需要用到一些icon图标，一些ui框架有提供icon图标，但是数量总有穷尽的时候，而且有些图标并不能满足你的要求，此时就需要用到iconfont这个网站了，里面提供了很大icon图标还有很多使用方式 图片、svg、Font class、Unicode、Symbol。
uni 加入图标_uni-app引入iconfont字体图标
weixin_39791152的博客
12-19 222
1 首先进入你的iconfont项目很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目,解压完就是这个了 ,然后把圈起来的放到你的项目文件里面 ,记得引入的时候路径别错了,随便放,引入路径对了就行进入这个网站, 然后把刚刚解压的文件打开 找到找不到?打死你 重新去官网下载,然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf点击...
vue使用iconfont 及出现方框解决
qq_50962973的博客
11-04 1696
VUE引入iconfont 下载本地后放入vue项目中 在main.js中导入 如果出现图标显示方框的话 在下载好中的iconfont.css配置一下 把里面的iconfont改成icon即可
解决iconfont 只显示小方框的问题
天颖
06-02 1万+
将自己需要的图标加入到购物车，随后添加到创建的项目中 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一定要有，后面是上图框中的。如果不加
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   ...
威纶通触摸屏下载项目文件后，文本都变成了框框的解决办法.docx
最新发布
05-15
### 威纶通触摸屏下载项目文件后，文本都变成了框框的解决办法 #### 一、问题背景 在使用威纶通触摸屏时，可能会遇到一个常见问题：通过Easy builder pro软件编辑并下载项目文件到触摸屏后，原本正常的文本突然...
解决jupyter notebook显示不全出现框框或者乱码问题
09-17
在使用Jupyter Notebook进行数据分析或编程时，可能会遇到一些显示问题，比如图表显示不全、出现框框，或者中文字符显示为乱码。这些问题通常与环境配置、字体设置以及编码方式有关。以下是一些针对性的解决方案。 ...
关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 2064
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
iconfont图标只显示方框的其中一种可能性
demonic_yang的博客
09-10 1980
项目场景： layui自带图标库不够用，需扩展，故考虑引入iconfont。 官网：www.iconfont.cn 问题描述： 按照官方文档引入后，发现图标不显示，只显示了一个方框。 官方三种使用方式，Unicode和Font Class均显示方框，Symbol可以正常显示。 引入路径无问题，使用方式无问题。 引入方式网上很多，在这里不赘述了。 解决方案： 偶然发现别人的iconfont.css中比我多了两行URL，去官网查看后，发现我的项目设置中勾选了【彩色】 去掉彩色，勾选EOT和SVG，重新下载
Iconfont图标是框的解决
qq_38928784的博客
03-30 725
这些icon图标显示框框，请修改图片属性： 选 始终复制 和 内容 图片选择复制可以复制相对路径，可以直接使用。
解决iconfont下载的图标显示的是小方框
Sara0064的博客
01-03 7287
嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。 第一步，我们先从iconfont粘贴一个线上链接。 粘贴到项目中 将图标名称粘贴到需要的位置 结果我显示的图标是 那么怎么解决呢。 然后在我们vue3项目中public中Index.html中引入 这么做之后我们打开 binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加
Vue 导入 iconfont图标显示方块
qq_36229552的博客
03-18 1056
琢磨很久，都不知道哪里有问题，然后重新写和粘贴代码走了一遍 把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 428
（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）解决方法：修改iconfont.css文件的woff2的url将，修改未base64。打开代码链接地址 复制替换项目中的iconfont.css。以上 👆 是个人前端项目，欢迎提出您的建议😊。以上 👆 是个人前端项目，欢迎提出您的建议😊。SubTopH前端开发个人站。在阿里图库的 点击生成代码。base64代码生成获取。
WPF、C# iconfont图标字体只显示框框
叮当说的博客
07-03 4949
在我们写C# 或者WPF 程序的时候，引入字体图标的时候，新手会出现下面这个问题； 下面说下常见的两个原因吧： 1、是文件路径定义的不对： <TextBlock Text="&#xe641;" FontFamily="Fonts/#iconfont"/> 如上面的代码，FontFamily 就是iconfont.tff 文件的路径； 如果这个路径写的有问题就会导致显示成一个小框框； 这个情况很好检查出来； 2、第二种情况比较难
WPF、C# iconfont图标字体只显示框框的问题
qq_51175166的博客
12-07 370
一开始我把Fonts文件夹名写成fonts，路径也是fonts，然后设计器能加载，但运行后就是红框框，后面改成大写后，如图，设计器和运行后能正常显示了。
使用elementUI已经引用了最新css库，但是组件中小图标还是显示方框的解决办法
hmy123cq3的专栏
03-30 1995
1.最开始引用官网的css是正常显示的 官网css的url地址：<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 2.从官网下载index.css放到本地后就显示方框了 <link href="../Css/index.css" rel="stylesheet" /> 3.最后得知，官网提供的url有个/fonts/element-icons.t.
python画图下方出现框框
03-27
如果你使用的是 `matplotlib`，你可以使用 `plt.axes()` 函数创建一个新的坐标轴，然后使用 `ax.text()` 函数在下方添加文本框。 下面是一个例子： ```python import matplotlib.pyplot as plt ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值