我们现在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"></span>
</NavItem>
<NavSearch placeholder="搜索"></NavSearch>
<span className="iconfont"></span>
</Nav>
<Addition>
<Button className='writting'>
<span className="iconfont"></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"></span>
</NavItem>
<SearchWrapper>
<NavSearch placeholder="搜索"></NavSearch>
<span className="iconfont"></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;
}
`;