使用iconfont 嵌入头部图标

我们现在iconfront 中下载下来需要的图标。下载解压后的文件如下。

第二排的文件( 和第一排的.woff2 )，是我们要放到项目中去的。

那么，我们首先在项目目录的src/statics 下，创建一个目录 iconfont，然后把第二排的文件拖进来。

然后，我们需要改一下其中的iconfont.css 文件，把里面字体的路径改成相对路径。如下。

@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1553417957099'); /* IE9 */
  src: url('./iconfont.eot?t=1553417957099#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP8AAsAAAAACDQAAAOvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDeINBATYCJAMQCwoABCAFhG0HPhspB8iOw8YxLWUUyZW/ePja7/XcfftfNvsDrEABykwsq6iojCcskVBAFpVujepUKDYiQ3nWNFMmXTonrehgkmbrdM7+rfA68gfxBcOIw2nzPLD5luWyNo1NY2yLugCjsTWwMbZ1UYBpCWPD2AUt8TSBatpUip3c4mqglZmTAnEliQzQZjRyQ2ooQluxMosPQKWkl8RFALwPfh//QWRoSToNc+beSQ4P0n+NeZYIF/1fpNkjANF0JrB1NFgBZOKs0nIARv4VUFX7K60BiiIxVVfss8T//5H4KMpi/eURkoZomcl9YBUFGn6NcTgEv2I5JH4lqjwkOY8vqPgIgB+IOvmMJMujem0ZpyKgrv/Orjtjbt+uvXmz+tatmrV3sjwb0ixZ2p07dbyK97mQ+/pq0kg1NPYGk8O+9cwBai0ANep3cs1lxeK6usXkmuSa/ZvBoi3U2hMKxYveNZ58bV3f4iCvutszNrjPR0zp+Fo4pNuzHizq8aJ8uPKNuK4irrauZlSPV05NXc9an36zFh35vS1I1MKvJ652wi7omYgRIuFFM0uWpP8Y+109J3D9HLhuB7HEili3cw4xm8BC/Bk7wFEh79rE7GvI+T+bdbsjtayGyGSl1DvK36kOfCo+TKHaDLVOqpWcWqii9MQnrXX4gp/Xb/9xH8cFg/j7+VlOVZeveGWUlUY7Dzhll5e7ElKvq5u3d47TgHO2l2e61+XL2c5k5oMHWaosd6Xmaboy3D2zYmz23mynd14umW6GstLgeTnepyd2mr2zu35kO2e/eJHjtMXJn5ftBO4CuD0BD8EUav0Pjz6Zs3kLA3/yKLsxP7nNJfmrlnrIip+HxKfYdntCCYaJ/pSos+iXijoWZU1ianNWpI5Qt2a7qUkSqoofGWbEvSnU452TCcV4gqTHFBrFDDFTV9DRtYpWsY5qWd76rlEyKHIvliwHCEN2IRnwDY0hl4iZehcdE96iNRQQ1X547Ng1FxKZJSMGI55mZ9MSZ7UIth6TYWolEqebGDktCei1SHZILjoiNDwfykMWJE8xxzFDjMRYoAXZaqZzwXnIZLLSNtnagTgcasDYlhgWJlS9KJSzmgFpmwxhYAiPxpqNJuFYWQheeYwsfL8SIprOhCE3FFS5ayEyB6l3WoRQ4R2IeUpLp4Jb6e8wgygShgl4nEBmZUbLhSbEZPmtaLbqYR0QDhbKMMBrkygMlRK6KkOXV5vfcANU5mM5UjSRo6N9gBiZMxAZjNouMRZWAgAA') format('woff2'),
  url('./iconfont.woff?t=1553417957099') format('woff'),
  url('./iconfont.ttf?t=1553417957099') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1553417957099#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;
}

.iconsearch:before {
  content: "\e623";
}

.iconAa:before {
  content: "\e636";
}

.iconqianbi:before {
  content: "\e63a";
}

然后，这个样式在Header 组件中引入并使用，如下。

import React, { Component } from 'react';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button
} from './style';
import '../../statics/iconfont/iconfont.css';

class Header extends Component {
  render () {
    return (
      <HeaderWrapper>
        <Logo href='/'/>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>
            <span className="iconfont">&#xe636;</span>
          </NavItem>
          <NavSearch placeholder="搜索"></NavSearch>
          <span className="iconfont">&#xe623;</span>
        </Nav>
        <Addition>
        <Button className='writting'>
          <span className="iconfont">&#xe63a;</span>
          写文章
        </Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}

export default Header;

下面，我们对搜索部分的布局做一下处理，首先是Header 组件给它的结构修改一下，如下。

        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>
            <span className="iconfont">&#xe636;</span>
          </NavItem>
          <SearchWrapper>
            <NavSearch placeholder="搜索"></NavSearch>
            <span className="iconfont">&#xe623;</span>
          </SearchWrapper>
        </Nav>

样式，如下。

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