解决iconfont下载的图标显示的是小方框

最新推荐文章于 2023-02-24 09:29:05 发布
最新推荐文章于 2023-02-24 09:29:05 发布
阅读量6.9k 收藏 13
点赞数 5
文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sara0064/article/details/112132239
版权

嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。
第一步，我们先从iconfont粘贴一个线上链接。
在这里插入图片描述
粘贴到项目中
在这里插入图片描述
将图标名称粘贴到需要的位置
在这里插入图片描述
结果我显示的图标是
在这里插入图片描述
那么怎么解决呢。
在这里插入图片描述
然后在我们vue3项目中public中Index.html中引入
在这里插入图片描述
然后设置的css样式

.iconfont{
  font-family: 'iconfont' !important;
  font-size: .16rem;
  font-style: normal;
  -webkit-font-smoothing:antialiased
}

这么做之后我们打开
在这里插入图片描述
binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加精进，能力是攒出来的，是别人拿不走的，所以与其抱怨薪资低福利待遇不好，还不如就好好努力呀，你懒得做的事情，总有人比你做的好，比你更加努力，你懒于付出时间精力去磨练技术，总有人替你享受更好的时光待遇和无尽的机遇。
加油，愿我们都成为自己想要成为的人!!!

Sara0064
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
BootStrap glyphicon图标无法显示的解决方法
01-19
如果不注意bootstrap引入css和fonts的规范，则可能会导致bootstrap 在显示glyphicon图标时无法正常显示，显示为方框。 此时可搜索bootstrap.css中的.glyphicon，可发现其大约上下10行左右有引入字体的URL，如下所示： 确保该目录存在即可。 通常出错是因为路径不正确所致。 以上所述是小编给大家介绍的BootStrap glyphicon图标无法显示的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
vue小图标favicon不显示的解决方案
12-11
将原生的代码用vue框架来做，出现种种问题，之前设置小图标的时候也出现了问题，总结了网上的解决方案，在此记下对我亲自试验并奏效的方案： 我是直接将favico.ico丢到根目录(就是src同级的目录)，然后进行在build/...
iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
记录和分享属于我的“IT”时光
04-11 6804
confont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
WPF、C# iconfont图标字体只显示框框
叮当说的博客
07-03 4577
在我们写C# 或者WPF 程序的时候，引入字体图标的时候，新手会出现下面这个问题； 下面说下常见的两个原因吧： 1、是文件路径定义的不对： <TextBlock Text="&#xe641;" FontFamily="Fonts/#iconfont"/> 如上面的代码，FontFamily 就是iconfont.tff 文件的路径； 如果这个路径写的有问题就会导致显示成一个小框框； 这个情况很好检查出来； 2、第二种情况比较难
Iconfont图标是框的解决
qq_38928784的博客
03-30 686
这些icon图标显示框框，请修改图片属性： 选 始终复制 和 内容 图片选择复制可以复制相对路径，可以直接使用。
iconfont阿里图标库使用；iconfont显示为方框；iconfont阿里图标库，依赖文件只有.woff2没有.woff和.ttf文件；
killerdoubie的博客
02-24 773
iconfont阿里图标库使用；iconfont显示为方框；iconfont阿里图标库，依赖文件只有.woff2没有.woff和.ttf文件；
解决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一定要有，后面是上图框中的。如果不加
iconfont图标只显示方框的其中一种可能性
demonic_yang的博客
09-10 1866
项目场景： layui自带图标库不够用，需扩展，故考虑引入iconfont。 官网：www.iconfont.cn 问题描述： 按照官方文档引入后，发现图标不显示，只显示了一个方框。 官方三种使用方式，Unicode和Font Class均显示方框，Symbol可以正常显示。 引入路径无问题，使用方式无问题。 引入方式网上很多，在这里不赘述了。 解决方案： 偶然发现别人的iconfont.css中比我多了两行URL，去官网查看后，发现我的项目设置中勾选了【彩色】 去掉彩色，勾选EOT和SVG，重新下载
关于使用iconfont图标总生成小长方形框的解决办法
ff_717的博客
02-12 2039
关于使用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   ...
Vue elementui字体图标显示问题解决方案
11-19
当字体图标无法正常显示时，通常会看到一个空白的方框或者错误提示，如“Failed to decode downloaded font”。 首先，问题出现在`build/utils.js`文件中的CSS加载器配置。在这个场景中，开发者尝试通过添加`public...
解决vue 项目引入字体图标报错、不显示等问题
10-18
其次，问题二：字体图标不显示，仅看到方框。这种现象通常意味着浏览器加载了字体文件，但无法正确渲染图标。原因可能有两个： 1. 未在使用字体图标的页面或者全局范围内引入字体样式文件。如果缺少了对应的CSS引用...
显示韩语方框解决办法
12-14
解决韩语显示方框的问题，主要步骤如下： 1. **安装ttc文件**：将下载的batang.ttc和gulim.ttc字体文件复制到系统字体文件夹。在Windows系统中，这个位置通常为"C:\Windows\Fonts"。你可以通过文件管理器直接导航到...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
iconfont使用方式Unicode和Font Class均显示方框
07-11
你遇到的问题可能是由于缺少字体文件或字体编码不正确导致的。请尝试以下解决方案： 1. 确保你已经正确引入了 iconfont 的字体文件。通常，你需要在 HTML 文件的头部中使用 `<link>` 标签引入字体文件，类似于： ```html <link rel="stylesheet" href="path/to/font/iconfont.css"> ``` 确保 `path/to/font` 是正确的字体文件路径。 2. 检查你是否正确使用了字体编码。在 iconfont 上，每个图标都有对应的 Unicode 编码，可以通过查看 iconfont 的文档或网站来获取。确保你在 HTML 中使用了正确的 Unicode 编码，并将其包裹在 `<i>` 或 `<span>` 标签中，例如： ```html <i class="iconfont"></i> ``` 确保 `` 是正确的 Unicode 编码。 3. 如果你使用的是字体类名（Font Class）来显示图标，确保你在 HTML 中正确地应用了对应的类名。通常，你需要在 HTML 元素上添加一个类名，例如： ```html <i class="iconfont icon-xxx"></i> ``` 确保 `icon-xxx` 是正确的类名。 如果上述解决方案仍然无法解决问题，可能需要进一步检查字体文件是否完整，并确保字体文件的路径和编码都是正确的。另外，还可以尝试清除浏览器缓存或尝试在其他浏览器上查看是否有同样的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值