Use font-awesome icons offline in reactjs

Description of the problem: The front-end framework built by reactjs+redux+antd was deployed on the intranet and found that the icon was missing.

solve: 

1. Try to localize the icon of antd. Although the localization is successful, the icon cannot be dynamically loaded, that is, the icon cannot be automatically loaded according to the json returned from the background:

title={<span><i className="iconfont">3</i><span style={{fontSize:'16px'}}>{v.txt}</span></span>}>

The content in the <i> tag must be a special string, not {v.icon}, so the icon cannot be loaded dynamically. (The previous blog has an introduction to how to do it)

2. Try to use font-awesome icon, success.

(1) Download font-awesome.min.css to the local, create a new folder and put it in the same level directory as index.html

(2) Refer to the above css file in index.html:

<link rel="stylesheet" href="font-awesome.min.css">

(3) Download fontawesome-webfont.woff2 to the local, create a new folder fonts in the same level directory of the index.html file, and put the font file in this folder.

（4）

npm install react-fontawesome --save

(5) Add font-awesome to the file that uses the icon:

import FontAwesome from 'react-fontawesome';

(6) Use:

<SubMenu key={v.id}
     title={<span><FontAwesome name={v.icon} style={{paddingRight:"5px"}}/><span style={{fontSize:'16px'}}>{v.txt}</span></span>}>
        {
          v.child.map(v2 => {
              return <Menu.Item key={v2.sref} style={{fontSize:'13px'}}>
                  <Icon type={v2.icon}/>
                   <span>{v2.name}</span>
                   </Menu.Item>
           })
         }
</SubMenu>