我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下：
1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件
<link rel="stylesheet" href="./iconFont/iconfont.css">2.在html中的使用：
使用类名方式：
<div class="itemInfo"> <i class="iconfont icon-info"></i> <p>这是一个iconfont</p> </div>使用unicode方式
<div class="itemInfo"> <i class="iconfont"></i> <p>unicode方式</p> </div>1.依然是将图标添加至购物车，添加至项目下载项目，找到包含iconfont.css的文件夹
2.改写iconfont.css文件
iconfont.css文件内容最初是这样的：
@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1572420906446'); /* IE9 */ src: url('iconfont.eot?t=1572420906446#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/....') format('woff2'), url('iconfont.woff?t=1572420906446') format('woff'), url('iconfont.ttf?t=1572420906446') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-tuichu:before { content: "\e600"; }然后我们对其进行改造，只保留其对字体文件的引用。
@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1572420906446'); /* IE9 */ src: url('iconfont.eot?t=1572420906446#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/...') format('woff2'), url('iconfont.woff?t=1572420906446') format('woff'), url('iconfont.ttf?t=1572420906446') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ }3.随后在我们的css文件中或者.scss文件中引入这个文件（相对路径引入），并且将之前的iconfont.css文件中的.iconfont类放到这个文件中，在类iconfont中定义你的图标的字体大小和颜色等样式。
@import '../../../layout/management/iconFont/iconfont.css'; .itemInfo{ ..... } .iconfont { font-family: "iconfont" !important; font-size: 70px; line-height:1; color:#fff; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }4.最后在react组件中引入上面的样式文件并使用iconfont
引入：
import React from 'react'; import S from './style.scss';类名方式
<div className={S.itemInfo}> <i className="iconfont icon-info"></i> </div>unicode方式
<div className={S.itemInfo}> <i className={S.iconfont}></i> </div>另外如果在react使用变量方式写入unicode会出现问题：页面上不能显示字体图片了，而是直接显示字体编码
<div className={S.itemInfo}> <i className={S.iconfont}>{iconFont}</i> </div>原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话，传递的时候只要将 "" 改为 “\ue636” 即可。
最后作一下补充说明：
由于我的项目是使用webpack中配置的css modules，为了不单独处理css文件不进行modules处理所以，这里采用的是unicode的方式来使用iconfont由于我们的iconfont文件引入了字体文件，所以在webpack的配置中需要配置/\.(woff|woff2|eot|ttf)$/使用file-loader打包后的iconfont标签：
可以看到我们的iconfont类被css modules处理过了。
图标正常显示：
