这里我们将学会使用Iconfont的图标，我们可以来阿里巴巴的开源图标库：

1. 下载图标

首先我们可以在这里面新建一个项目：

这个时候我们就可以将需要的图标添加进来了，把所有需要的图标加入购物车

接着添加到我们的项目中去：

接着我们把图标下载到本地，下载下来解压缩之后是这样的：

其中的教程其实可以看demo_index里面会写，这里我们再过一遍，首先把几个有用的文件放到我们项目下面：

2. 引入图标文件

首先我们打开字体的CSS文件，加入一个相对路径：

这样就可以引用到本地文件了。

我们需要明确一点，这个iconfont样式不是某一个组件用到，而是整个项目都有可能用到的，所以需要作为一个全局样式，这里使用之前的方法进行改造，改为JS文件并利用injectGlobal进行封装：

最后在index引入就可以了：

3. 使用图标

这里看一下官方教程：

具体编号就是图标的编号。

首先我们的iconfont.js文件需要下面这样写：



import {createGlobalStyle} from 'styled-components';

export const GlobalIconfont = createGlobalStyle`

@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1577194200832'); /* IE9 */
  src: url('./iconfont.eot?t=1577194200832#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARoAAsAAAAACMwAAAQZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqEYIQYATYCJAMUCwwABCAFhG0HUxuvB8gOJSHBwACAAQBgBNkSnb3yfp97QaVC09KxkQE0MiotQWEJShgKLYRGvAMcZfj3zJe+Y5ID046ZdKC3BYOKpODSVGMzqL+D4P7P5fjW8wNrfaBcxly2p3XUCzCaQFk4x01vgARcIIl6CuLZTMbBT6BZ1R1yXlFHgRCFsS0Qt3qtEoSk3EoNGXpbV3K2iE8gUJ8+yM4CPvrfj79SIoSkZoagq5tyDSj6EffcDb1+LxiQJeAdLwjuEhl7gELclYZvwTC7B2rK4gDHgKaXpLHmEc8znrv9fmL9jqzN/MOjCEkmOoZ5mCKOc4UfcbY6thBwClgy4JRgccPifrG6tWEEnwGIeyfWHpkUVZrFQ/oZrEUAbOMR8uHMgRvs9evM1avUtWu070YhPY3oNkOVI2/cYBVld4hAr3EKNWJ9+01vhc6V91HuwXwAtGhf25TziMSykk8zj966EnhXYb4jCPKWWT2lszg1dkasvaCPdxqm9hFTiRmEvmuNhNMahmJpF8WwM3xx9DSvTUJ8RFwmTZ8SS01tSINltYmsJKHM9KmAmtbQM9u791l6ull8/9nNtQQ7Z82ObR3oXde652xE164d3d0FSvPcCxfmwjmQGCGrAK05sMzZ/cfadUmrXLNPWkfLVq2SjTYVcIyGUMAIWQXeGxzkKy91LrvEhftVpdcNBY20rESlL7gR8KfALh7LSkQCTxKsXRh92ECstijn6SBWPKOI+9Osw6cOrUDB3a5161xVrgULyol4BNZ5AvfjCkVQciRQXZZHzZ9fntp67drbt/bhNj8id65YcWqOw3H1muhwyV19WuWeAwAMP//7F3r8co8ODv7h822yA760fogs3jeAyMCjYxQvHkzeUn1nztDtLYYTcix+S7OX1an9Fv0wOBQT6yviGsqBG8D/m3AdjPXF/nwwA7E3AOR3eQn2hSP/Gr/xzTiqenBE3rcQrIDvnVNvQtde/f1aKJo/gqZlT1F1hqcWudtWy9Hq4BWakzLU8PXHJ90fxzrTup7Qm4khGbACWW8NKcQeVEP2odM7gmZX5eUhUwRQlEHsGE8gjNsAyagvkI07hxTiHlSz3kFnPCA01xFDc8hG6NFSgVOKnIZUeUi92mrhLZ+IBo29OK3DpBSSOl/EcIJdnyCTE5KyhUrOwgljHLA7tSmiyJO8YDWTFUQYZzJZSZtgNXBqMUEniracxES+7EUJaqsZoM4IOEoijgZJxYOkp2ZlwbuDRWju871wtBxMlIQaSkWewRHY6WcnJUuQ1AKpNFtaUa5lsZ2TVgqRiKc38QRWZqQKBDkmM2tFspWvMuCoiRLoeqRtciRS/fi25oT5reZnPAWNQa9GihwlanTajdKi1SgNerdDVqwMsSktg+/ChDtLeqh1nNqotwAAAAAA') format('woff2'),
  url('./iconfont.woff?t=1577194200832') format('woff'),
  url('./iconfont.ttf?t=1577194200832') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1577194200832#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

`;

接着需要在根组件处直接引入：



import React, {Fragment} from 'react';
import Header from "./common/header";
import {GlobalIconfont} from "./statics/iconfont/iconfont";
import {GlobalBody} from "./styles";

function App() {
  return (
      <Fragment>
        <GlobalIconfont/>
        <GlobalBody/>
        <Header/>
      </Fragment>

  );
}

export default App;

然后在i标签中通过className制定就可以了：



                <HeaderWrapper>
    <Logo/>
    <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载App</NavItem>
        <NavItem className='right'>登录</NavItem>
        <NavItem className='right'>
            <i className='iconfont'></i>
        </NavItem>
        <NavSearch></NavSearch>
    </Nav>
    <Addition>
        <Button className='writing' >写文章</Button>
        <Button className='reg'>注册</Button>
    </Addition>
</HeaderWrapper>

最后我们需要让iconfont放到中间位置，这里最终的CSS是这样的：



                export const SearchWrapper = styled.div`
    position:relative;
    float:left;
    .iconfont{
        position:absolute;
        right:5px;
        bottom:5px;
        width:30px;
        line-height:30px;
        border-radius:15px;
        background:green;
        text-align:center;
    }
`;

实战Header：使用Iconfont来嵌入图标

1. 下载图标

2. 引入图标文件

3. 使用图标