代码见https://gitee.com/XiaoKunErGe/JianShu.git历史第四次提交
1.首先到浏览器搜索 iconfond.cn
2.登录，创建项目
屏幕快照 2019-06-04 15.49.09.png
3.在搜索框你要使用的图标 例如 放大镜
选择你喜欢的图标，加入购物车，然后点击又上角的购物车，选择添加到项目，选择要添加到的项目然后确定，然后点击下载至本地
4.打开项目文件src文件下的statics文件，将下载的
文件中的有用文件添加进来。
5.打开iconfont.css,在每一个url引入的地方都加一个相对路径./,删除下面的class，将文件改成js文件，通过createGlobalStyle实现把这个样式注入到全局。
import { createGlobalStyle } from 'styled-components';
export const GlobalStyleFont = createGlobalStyle`
@font-face {
font-family: "iconfont";
src: url('./iconfont.eot?t=1559635184173'); /* IE9 */
src: url('./iconfont.eot?t=1559635184173#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAAsAAAAAB+gAAAOBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDKIMNATYCJAMQCwoABCAFhG0HQxv6BhHVm/vIfibEm44xQPOskJT0JbEmCCivqk73zOaSpXUw3wDxpJ9TAAGbm+GWURGKJbG//PQdSVtWuBB+BMD/HDNe2QTy22wuGcmjvQGOonVAEX2RmsB3wnjL8FqXwkEfhwAMAsUT5ZX1bdBRkHECEEMG9u+JnlGgGtIFOgJrxVKFmI8FXZuh3QbmBX8vPpNaBw2LhExt7lfRh+J32rsIOd42ni6eitnT6QB5FUggHigQAyoNvZBRIJ7EMHsrMoGOjgZTtXm+i7DZMOsoAp3+ywOBRANhhaTaA5COgxLeaZwMAe88GVXCCEhBA/ggIh2SJgKnIFh/XRQSoduFOdjT6wLbdze7Gu2MNp3Ndk9D1yeP3P3YmPlUTDh0r+pZli/13Zl5ydPBlc+embPuPIHxG3yMle2Otzm8fTnjz8y6d0j0fvas/dOn7R4/bvPkSdunAm9CO1p01ePH7ZdO2DXLo+2S8dtnerZd+7n3kvXxp5ubFx9pvwS8i5dnbHviUcOf/fi59+LrPXJOjqm4OqY268zt9DNVYkvqHs/mDbN93SfeLw4JyyypzIv+UtK+2gx0T/rVqY6ZtHCHfU1daVXWZ+eSwv5D+58oXGq9TbFZed/mEdKuJHVlNvebF8vLl6XLXYRpQE+owF0M2YuqR3Bu6IjLb1j2uWEjD8gvn+UB+sFfvpT3vRt+KvzLiRN3Ik5FvKaiftLks38/Oodfru5zos3eUSnZ9fNm+Qcrb+s4bUC3Pvc7j/MeE3UkqTwihhGQk+QEbT/Y9sqHshXYxshTcvyvHMb/0Ly67k75f3XzUUpe+Ff8CGy2MYpuQv4HszPzxzE75imLTZRKGRzOsI2KotQ4NMDAAH5XBFy9nULk0TkVBDoeCWjYEQASnXCEwsSDBZN0sKJTBAZxqlabuBmFRKgWQKwpCATO9oGGI+dA4uwOQmHegAVPX8GKcwkG7YTbliaR9VSdBI2iB/uH5HglptYqTL9jOGYjaXaAe6PsyQ1d3ebDN1xRppixf0KvSkDCC1zRaTjPDJvwiE7rqLoNTUNV71Q7XrKKMkGj6MH+ITleySuuVeH37xiO2UhDTpPyjbKnzqGr2w6Im2DtlHMrj9k/oVclIOEFrkiHMw0wbNWDRnRaxwG+bWhwIeoqqJcXLW+4BjAgWyqhCSmUsKD1NBWZNXgzJq9P/j8WwzZlGQAAAA==') format('woff2'),
url('./iconfont.woff?t=1559635184173') format('woff'),
url('./iconfont.ttf?t=1559635184173') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont.svg?t=1559635184173#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;
}
`;
然后到App.js中引入
import { GlobalStyleFont } from './statics/iconfont/iconfont';
function App() {
return (
<React.Fragment>
<GlobalStyle/>
<GlobalStyleFont/>
<Header/>
</React.Fragment>
);
}
6.通过<i class="iconfont">3</i>这种样式引用选中的图标。
<Nav>
<NavItem className='left active'>首页</NavItem>
<NavItem className='left'>下载App</NavItem>
<NavItem className='right'>登录</NavItem>
<NavItem className='right'>
<i className="iconfont"></i>
</NavItem>
<SearchWrapper>
<NavSearch></NavSearch>
<i className="iconfont"></i>
</SearchWrapper>
</Nav>
<Addition>
<Button className='writting'>
<i className="iconfont"></i>
写文章</Button>
<Button className='reg'>注册</Button>
</Addition>
适当在style中适当调节UI,
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;
}
`;
