React.js引入阿里icon解决icon显示为小方框问题

1.效果图:

2.引入步骤:

2.1. 进入IconFont阿里矢量图标库，搜索想要使用的icon名称。

2.2。将选中的icon添加入库

2.3。点击右上角的购物车图标，将该icon添加到个人项目中(如果没有项目，新建一个即可，很简单)

从上图可以看到，总共有三种引入阿里icon的方式。我采用的是Font class这种，其他两种引入可以点击右边的使用帮助查看详细过程。

2.4. 点击“下载到至本地”，解压文件后得到如下文件目录

在你的react工程文件目录下创建static文件夹，将这些下载的文件放入到static文件夹内(其中的demo.css,demo_index.html,iconfont.woff2这三个文件可以删掉，也可以留着），如下图

2.5.创建一个BookType组件，引入iconfont.css文件，使用icon

注意这里的 className值，一定一定要在icon的名字前加上“iconfont”,否则就会变成小白框。

<i className="iconfont icon-wuxia"/>

icon的名字如这里的“icon-wuxia”可以点击该icon的”复制代码“就可以得到，如下图所示

3.如果你在IconFont网站往你这个项目里又添加了几个新icon,记得要更新iconfont.css的内容

更新步骤如下：

3.1.添加完icon后，进入到”我的项目“页面，点击Font class,点击”查看在线连接“

3.2. ，复制这个地址在浏览器打开，将这个css文件的内容复制粘贴到原来的iconfont.css内(就是替换掉原来的内容)

3.3.更新完成

4.如有问题，请指出交流 :)

React.js引入阿里icon解决icon显示为小方框问题相关推荐

如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
exif.js html图片旋转,解决图片显示 Exif.js更改图片的显示方向
没什么文字直接上代码 //这是一个解决exif更改脱方向的一个js文件 // 应用前先npm install exif-js --save或者直接引入exif-js 调用方法 // let baseD ...
react+antd 引入moment之后，DatePicker显示出现英文
解决方案: 在js前加上以下3句. import moment from 'moment';import 'moment/locale/zh-cn';moment.locale('zh-cn'); 最 ...
【最全最详细】publiccmsCSS和JS引入无效的解决方法
大家好,我是雄雄,欢迎关注微信公众号:
Python-matplotlib画图时中文显示为小方框的解决方法
Mac版本: 参考:https://www.cnblogs.com/Ootori/p/7716687.html 其中加代码时要多一行:import matplotlib as mpl Windows版 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
u-modal不能控制显示隐藏 icon图标不显示引入问题
Modal 对话框使用了 v-model 控制对话框显示,但是在真实使用的使用,发现这个值改变了 true 之后,对话框仍然不显示 <u-modal v-model="showM ...
解决网页ICON图标无法显示的问题
解决网页ICON图标无法显示的问题参考文章: (1)解决网页ICON图标无法显示的问题 (2)https://www.cnblogs.com/ziyoublog/p/10974406.html 备忘 ...
elementPlus使用icon图标不显示解决方法
近期在学习Vue时用elementUI时发现icon在页面上显示不出来,根据官方文档上的用法都显示不出来,听说在文档更新后好像不可以直接使用,需要引用. 正常按照文档标签使用(icon图标未显示) & ...
小程序以及h5引入阿里图标不显示最简单解决方案
小程序项目,按照老方法,图标部分手机不显示,经理炸毛,自己也头痛,网上搜了一大堆方法,有转化base64的,还有其他各种的,感觉太麻烦了也不好用,本人就讨厌麻烦,直男程序员一枚,今天花时间,认真研究了 ...

React.js引入阿里icon解决icon显示为小方框问题

注意这里的 className值，一定一定要在icon的名字前加上“iconfont”,否则就会变成小白框。

React.js引入阿里icon解决icon显示为小方框问题相关推荐

最新文章

热门文章