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

最新推荐文章于 2023-08-28 11:53:06 发布

小邮差

最新推荐文章于 2023-08-28 11:53:06 发布

阅读量529

点赞数

分类专栏： react 简书项目文章标签： react 前端

本文链接：https://blog.csdn.net/qq_42225572/article/details/109239334

版权

react 简书项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先我是按照这个博主的解决方式，整体上的确会有部分效果

https://blog.csdn.net/weixin_42429718/article/details/109063290#comments_13558253

但是无法解决显示为小方块的问题

解决方式如下

进入iconfont官网找到你的项目选择如下Unicode，然后查看在线连接，会提示你点击生成在线连接，

然后效果如下，把这段代码覆盖本地项目iconfont.js 里面的这段代码即可解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小邮差

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React 实战 | react项目使用图标iconfont

qq_35536883的博客

07-16

4780

Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...

iconfont显示小方块

CX的博客

12-24

1183

原代码： main.js: import 'src/assets/styles/iconfont/iconfont.css' header.vue: iconfont.css: .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smo.

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

iconfont本地引入显示小方块问题

weixin_44705310的博客

09-03

1917

问题：本地引入icon，再次在项目中添加新的图标，重新下载文件，引入后页面图标都显示小方块。解决方法如图：将此段代码重新生成一下，复制到iconfont.css文件中。

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 ...

react项目如何使用iconfont的方法步骤

10-17

主要介绍了react项目如何使用iconfont的方法步骤，这里介绍下如何在项目中配置。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩

05-25

react-iconfont-cli 用纯JS把iconfont.cn的图标转换成React组件，不依赖字体，支持多色彩特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件，支持es6和typescript...

在react native中使用阿里iconfont图标

01-08

1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下：打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...

react-iconfonts:一个React来智能地使用iconfont的项目

05-28

一个React智能地使用Iconfont的项目安装 $ npm i -S react-iconfonts import IconFont from 'react-iconfonts' 图标字体将您的图标（SVG）上传到您创建的图标项目，然后从 download.zip ，解压缩download.zip 。...

解决 Elementui icon偶发性乱码问题的几种解决方案

最新发布

CiCi____的博客

08-28

5390

elementui的icon图标偶发性乱码解决方案（已解决）

react项目中使用iconfont字体图标

bidang3275的博客

05-21

3345

1. 复制iconfont字体图标文件到项目中 2. 在index.js项目入口文件中引入inconfont.css文件 3. 使用iconfont方式：正常使用即可 # 实体方式：需要加iconfont样式基类  # 类方式：除了加iconfont样式基类外，还需要加对应的图标样式类名

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

Sara0064的博客

01-03

7195

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

iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。

记录和分享属于我的“IT”时光

04-11

6949

confont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。

iconfont通过font class引入显示小方块bug

a1071626267的博客

09-29

1052

iconfont通过font class引入显示小方块bug

uni 加入图标_uni-app引入iconfont字体图标

weixin_39791152的博客

12-19

214

1 首先进入你的iconfont项目很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目,解压完就是这个了 ,然后把圈起来的放到你的项目文件里面 ,记得引入的时候路径别错了,随便放,引入路径对了就行进入这个网站, 然后把刚刚解压的文件打开找到找不到?打死你重新去官网下载,然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf点击...

react 使用iconfont 图标

一起学习前端知识，一起成为前端开发工程师！

10-12

2479

复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！

解决使用阿里巴巴iconfont页面显示小方块问题

HL477的博客

11-05

4408

1、我们把下好的字体图标引入到我们需要的文件夹中：我这里给改名叫font了便于使用，原文件名字不是这个（大家也可以像我一样改成这个名字） 2、引入所需要的代码 @font-face 和 .iconfont 里面的代码在 iconfont.css 文件中前两个就是 4、调整好了我们打开页面发现页面只显示了两个小方块解决办法：只需添加一行代码即可（引入这个iconfont.css文件） 5、最后我们就能看到我们想要的结果了 ...

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

demonic_yang的博客

09-10

1964

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

在react中使用iconfont

MFWSCQ的博客

10-31

6149

一、基本使用我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...

优化Webpack：解决React项目打包速度慢的问题

"针对Webpack打包速度慢的问题，本文提出了有效的解决方案。在开发腾讯实习生Mini项目时，使用React、React-Router、superagent、eventproxy等第三方库导致Webpack打包时间过长，影响开发效率。通过问题分析，发现...