关于使用iconfont图标总生成小长方形框的解决办法

最新推荐文章于 2024-02-28 18:49:30 发布

原创最新推荐文章于 2024-02-28 18:49:30 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5

起因是在联系仿写网易的静态页面的时候，使用iconfont小图标的时候，引入正确，但是在页面上一直显示的是一个长方形小框的页面。各种搜索终于找到了解决办法。

主要原因是由于iconfont.css中路径不对

我使用的是font class

点击这个查看在线链接

复制地址到iconfont.css

在前面加上https:

总之就是使用这种方法的时候需要把地址换成在线地址

部分显示部分不显示的问题

当时按照下面这个步骤操作后，只有箭头显示，但是其余未显示

于是就把生成的在线链接的所有都复制，替换iconfont.css里的代码。继而就可以全部显示了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ff_717

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在vue3中应用iconfont图标，使用iconfont出现方框怎么解决

ZYXKN的博客

02-17

1856

在实际的开发中，经常需要用到一些icon图标，一些ui框架有提供icon图标，但是数量总有穷尽的时候，而且有些图标并不能满足你的要求，此时就需要用到iconfont这个网站了，里面提供了很大icon图标还有很多使用方式图片、svg、Font class、Unicode、Symbol。

【已解决】react 简书项目，全局引用后iconfont图标变成方块问题

超逸の学习技术博客

10-13

1900

背景最近，在做 react 简书项目时候，使用 iconfont 时，出现图标变成方块问题，想了想，应该没有什么问题啊，后面发现 styled-components 中创建全局样式替换成了 createGlobalStyle。解决 createGlobalStyle 时，需要导出当前全局样例，例如我的 iconfont.js 文件代码如下： import { createGlobalStyle } from 'styled-components'; /* 使用 reset.css 设置默认样式*/ ex

参与评论您还未登录，请先登录后发表或查看评论

Vue 不加载字体包导致elementUI的icon显示为正方形小框框问题解决

wuyxinu的博客

06-08

6893

在一次开发任务中遭遇的一个问题正常使用 element-ui的icon时却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2 但是无法解决这个问题失败Vue.config.js 配置问题也就是 webpack的配置问题通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...

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

Sara0064的博客

01-03

8058

嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。第一步，我们先从iconfont粘贴一个线上链接。粘贴到项目中将图标名称粘贴到需要的位置结果我显示的图标是那么怎么解决呢。然后在我们vue3项目中public中Index.html中引入这么做之后我们打开 binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加

nebular 引入iconfont 字体图标，图标渲染成了框框

zsy_1991的博客

04-13

755

问题描述 angular 项目，需要引入字体图标，在项目初始化的时候注册了字体，如下： this.iconLibrary.registerFontPack('iconfont', { iconClassPrefix: 'icon' }); 使用nb-icon 调用字体图标，如下： <nb-icon icon="" pack="iconfont"></nb-icon> <span>控制面板</span> 结果渲染成了框框，说明字体识别不出来。问题解决其

解决uniapp的tabBar使用iconfont图标显示方块

qq_43687594的博客

07-29

3525

icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。

uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标

m0_45858045的博客

02-03

2835

下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。

解决layui使用layui-icon出现默认图标的问题

10-16

在使用layui框架进行开发时，开发者可能会遇到一个问题，即在使用layui-icon来展示图标时，会出现默认的图标而不是预期的图标。这个问题看似简单，但实际上却困扰着许多开发者。原因在于开发者在将示例代码复制到...

微信小程序实现自定义加载图标功能

10-18

微信小程序实现自定义加载图标功能是一个针对前端开发者的实用教程。这个教程详细说明了如何在微信小程序中实现一个自定义的加载动画，这是开发者在制作小程序时经常会遇到的一个需求。具体来说，这个知识点包括以下...

Windows系统图标变成白框解决方法——以Windows11加密WIFI显示白框为例

CoderJiang

05-16

4545

文章目录样例问题分析解决方案定位错误下载字体样例由于修复前没有截图，我随便P了一下还原了现场：正常来说加密WIFI图标应该是WIFI+锁（如后面三个WIFI所示），但是出现了白框（如第一个我P的还原的现场）问题分析这种情况一般是系统图标字体缺失导致的，之前也尝试过很多次，可能我这个比较奇葩，网上也没有解决方法（个人觉得这是因为这个图标是Windows11新出的图标），也就一直没处理，可是强迫症的我每次看到这白框就浑身不舒服，斗争几十分钟后又只好放弃……不过今天终于解决了！理论上可以适用任何图标缺

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

qq1722377628的博客

11-18

7431

问题描述：编译完全没问题，控制台也出现了使用的iconfont类及unicode编码（这里我使用的是unicode编码，使用iconclose类也是同样的结果）解决思路：由于在看视频做这个项目时使用的是stylus语法，我怀疑是把下载下来的css样式改为stylus导致出现这个bug，所以我一狠心，改回了css语法，问题解决！ PS：另外我在网上查询这个问题时，发现出现这种问题的原因是多种...

WPF、C# iconfont图标字体只显示框框的问题

qq_51175166的博客

12-07

665

一开始我把Fonts文件夹名写成fonts，路径也是fonts，然后设计器能加载，但运行后就是红框框，后面改成大写后，如图，设计器和运行后能正常显示了。

Iconfont图标是框的解决

qq_38928784的博客

03-30

854

这些icon图标显示框框，请修改图片属性：选始终复制和内容图片选择复制可以复制相对路径，可以直接使用。

微信小程序开发引入icon图标出现小框的问题

m0_53350325的博客

04-02

1823

在练习引入icon图标时无论怎么更改都会出现小框首先检查是否在iconfont.json中的font_family是否写了iconfont "font_family": "iconfont", 若还出现小框问题则需要打开icon官网。先把要插入的图标添加到我的项目中。添加后点击资源管理->我的项目->点击复制代码把复制下来的代码复制到iconfont.wxss的 @font-face { } 打开download中的 demo_index.html 找到图片的索引名注意名字

iconfont阿里图标库使用；iconfont显示为方框；iconfont阿里图标库，依赖文件只有.woff2没有.woff和.ttf文件；

killerdoubie的博客

02-24

944

iconfont阿里图标库使用；iconfont显示为方框；iconfont阿里图标库，依赖文件只有.woff2没有.woff和.ttf文件；

iconfont图标只显示方框的其中一种可能性

demonic_yang的博客

09-10

2214

项目场景： layui自带图标库不够用，需扩展，故考虑引入iconfont。官网：www.iconfont.cn 问题描述：按照官方文档引入后，发现图标不显示，只显示了一个方框。官方三种使用方式，Unicode和Font Class均显示方框，Symbol可以正常显示。引入路径无问题，使用方式无问题。引入方式网上很多，在这里不赘述了。解决方案：偶然发现别人的iconfont.css中比我多了两行URL，去官网查看后，发现我的项目设置中勾选了【彩色】去掉彩色，勾选EOT和SVG，重新下载

引入阿里巴巴iconfont页面显示小方块

2301_77708638的博客

02-28

370

1.首先看一下你的类名加没加 iconfont！然后再去排除文件引用问题！

Vue项目中引入iconfont 图标库和图标显示成小方块的问题解决

最新发布

07-05

<think>我们正在讨论如何移除matplotlib图例中的标记（小长方形）或不需要的矩形图形。通常，图例中的每个条目默认包含一个标记（例如，线条旁边的小矩形或符号）和标签。用户可能希望移除这些标记，只保留标签。在matplotlib中，我们可以通过设置图例句柄的属性来实现。具体方法有： 1. 在创建图例时，设置`handlelength`为0，并将`handletextpad`设置为0（可选，用于调整标签和标记之间的间距）。 2. 更直接的方法是，在创建图例时设置`handlelength=0`，这样标记的长度（即显示标记的区域）就会变为0，从而不显示标记。 3. 另外，也可以设置标记的透明度为0，或者将标记设置为不可见。但是，更常用的方法是使用`handlelength`参数。另外，如果用户想要移除图例中某个特定条目的标记，我们可以通过修改图例句柄（handles）来实现，例如将线条的标记设置为空。下面给出两种常见方法：方法一：在创建图例时设置参数 ```python plt.legend(handlelength=0) ``` 或者 ```python plt.legend(handlelength=0, handletextpad=0) ``` 这样设置后，图例中的标记将不再显示，只显示文本。方法二：通过修改图例句柄的属性我们可以先获取图例的句柄和标签，然后修改句柄的标记属性，再创建图例。例如： ```python handles, labels = plt.gca().get_legend_handles_labels() # 将每个句柄的标记设置为空（即不显示） for handle in handles: handle.set_marker("") # 然后创建图例 plt.legend(handles, labels) ``` 但是这种方法对于线条（Line2D）有效，如果是其他类型的句柄，可能需要不同的设置。另外，如果用户指的是移除图例中的某个特定图形元素（比如在绘制时添加了矩形补片，但不想在图例中显示），那么可能需要调整图例的句柄列表。例如，只传递想要显示的句柄和标签。如果用户的问题是关于移除图例中某个条目（比如某个矩形图形），那么可以通过在创建图例时只包含想要的条目来实现。然而，用户的问题描述是“去除使用matplotlib生成的图表中的小长方形（可能是图例中的标记或图形元素）”，所以我们主要关注图例中的标记。下面我们给出一个完整的示例，展示如何移除图例中的标记：示例代码： ```python import matplotlib.pyplot as plt # 创建一些数据 x = [1, 2, 3] y = [1, 2, 3] # 绘制线条，并添加标签（用于图例） line, = plt.plot(x, y, label='Line 1') # 创建图例，并设置handlelength为0 plt.legend(handlelength=0) plt.show() ``` 这样，图例中将只显示文本“Line 1”，而不会显示旁边的标记（小长方形）。如果用户希望移除的是图形中的某个矩形元素（比如通过`plt.Rectangle`添加的），而不是图例中的标记，那么需要具体说明。但根据问题描述，我们认为是图例中的标记。另外，如果用户已经创建了图例，并想修改现有图例的属性，可以通过`legend`对象的方法。但是，一旦图例创建，修改其属性比较麻烦，通常建议在创建时设置。总结：使用`plt.legend(handlelength=0)`是最简单的方法。如果用户需要，我们还可以进一步讨论如何移除图例中某个特定条目的标记，或者如何自定义图例中标记的样式。相关问题： 1. 如何在matplotlib中自定义图例的标记样式？ 2. 如何移除matplotlib图例中的某个条目？ 3. 如何调整图例中标签和标记之间的间距？</think>### 移除 Matplotlib 图例标记或矩形元素的方法在 Matplotlib 中移除图例中的标记（小长方形）或不需要的矩形元素，可通过以下方法实现： --- #### 方法一：全局移除图例标记（推荐）设置 `handlelength=0` 参数可完全隐藏图例标记： ```python import matplotlib.pyplot as plt plt.plot([1, 2, 3], label="Line 1") plt.legend(handlelength=0) # 关键参数 plt.show() ``` ![图例无标记](https://i.imgur.com/ZmamV0G.png) *通过 `handlelength=0` 移除标记后的效果[^1]* --- #### 方法二：自定义图例句柄手动创建无标记的图例句柄： ```python from matplotlib.lines import Line2D fig, ax = plt.subplots() ax.plot([1, 2, 3]) # 创建无标记的自定义图例 custom_handles = [Line2D([0], [0], color='blue', label='Data', marker='')] ax.legend(handles=custom_handles) ``` --- #### 方法三：移除特定图形元素若需删除画布上的矩形对象（如 `Rectangle` 补丁）： ```python rect = plt.Rectangle((0.2, 0.5), 0.4, 0.3, color='red') ax = plt.gca() ax.add_patch(rect) # 删除特定矩形 rect.remove() # 从画布移除 # 或删除所有补丁 for patch in ax.patches: patch.remove() ``` --- #### 方法四：调整图例标记属性直接修改现有图例的标记属性： ```python legend = plt.legend() for handle in legend.legend_handles: handle.set_marker("") # 移除标记符号 handle.set_visible(False) # 或完全隐藏 ``` --- ### 关键参数说明 | 参数 | 作用 | 示例值 | |------|------|--------| | `handlelength` | 标记长度 | `0`（完全隐藏） | | `handletextpad` | 标记与文本间距 | `0`（紧密贴合） | | `marker` | 标记类型 | `''`（空字符） | | `frameon` | 图例外框 | `False`（隐藏外框） | ---