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.如有问题，请指出交流 :)