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

1.效果图:

React.js引入阿里icon&&解决icon显示为小方框问题_第1张图片

2.引入步骤:

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

React.js引入阿里icon&&解决icon显示为小方框问题_第2张图片

2.2。将选中的icon添加入库 

 

React.js引入阿里icon&&解决icon显示为小方框问题_第3张图片

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

React.js引入阿里icon&&解决icon显示为小方框问题_第4张图片

React.js引入阿里icon&&解决icon显示为小方框问题_第5张图片

 

 

React.js引入阿里icon&&解决icon显示为小方框问题_第6张图片

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

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

React.js引入阿里icon&&解决icon显示为小方框问题_第7张图片

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

React.js引入阿里icon&&解决icon显示为小方框问题_第8张图片

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

React.js引入阿里icon&&解决icon显示为小方框问题_第9张图片

 

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

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

React.js引入阿里icon&&解决icon显示为小方框问题_第10张图片

 

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

更新步骤如下:

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

React.js引入阿里icon&&解决icon显示为小方框问题_第11张图片

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

 

React.js引入阿里icon&&解决icon显示为小方框问题_第12张图片

3.3.更新完成 

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

你可能感兴趣的:(React.js)