2. react 简书 头部(header) 图标添加

1. 访问 iconfont 并注册 登陆

2. 进入 iconfont 头部 图标管理->我的项目

3. 点击右边的文件夹 + 号 图标 创建我的项目 输入项目名称即可

4.在 搜索框 搜索 '放大镜' 三个字

5.找到合适的图标 点击添加入库

6.点击右上角的购物车 -> 添加到项目 选择 项目

7.点击下载到本地 并解压

8. 将解压后的文件 放到 src 下的 statics 下的 iconfont 文件夹内

9. 删除原有的 iconfont.js 将文件夹内的 iconfont.css 改为 iconfont.js 并改写为

#iconfont.js

import { createGlobalStyle } from 'styled-components';

export const Globalstyle = createGlobalStyle`

@font-face {font-family: "iconfont";

src: url('./iconfont.eot?t=1575438268370'); /* IE9 */

src: url('./iconfont.eot?t=1575438268370#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAU0AAsAAAAACcwAAAToAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqHDIYAATYCJAMQCwoABCAFhG0HQxttCCMD9WkwspP948COIV9IGx0Sh5TDJpwY8FVPFP8yDDe3eKjGfm/v9jviSZJoZKg+ncSQTUqASILYKB1PXsKf7zf1DhraQutQNUUqIlNJprxkc2RqzsT0S7fmLNBmVIQaySlChT77pkDppelA+/1x7/SPOg9sPqvtMuayPbALA4wDCmiMzVvjaABiYD3AM1yYwO0EumYFgHu7y92KJKFfIG7yFK3IZZYxpNDWNUOmpnik0i735RLgQf9+/AuLiKJRCTvtn21ja/EVbyp621erqRoTynPiNouKNUASF6HuI64ZXYPqftI9G4C2+E7hK1733tT/fZL2Rd0mtbw/vEI0CeoBJK7HKl8hi21NDxkE39WsMJ7d2xgkVgGI26fddDlNm1KMkZHeMEPUPs5AGEYRzXfusIrC3b7N3LpVJylpQ+gUBDQbyfozozdoc87dKoGTBQAEEteS63yu3QrZ5ED7OMuSJJB0iTB/tXU5J782JiP8ub3xF5Xyjf4yhLI1obNWuJtKeKKVt9GsVlCLROahBB+WE4lInayR8ChOPVVL0uzV/IuK7/rlNoIoytbKiK3BjJpK8FtIc6VcHm5BpIh9tzz8kjFZiefuyRziDsXg2nUAkGwRBijxCgJpq6Zo9mgyI4oUlGXINiK8EcKtycWpyJZmWouUG+t/1P0oU5w1ovFuorJKcsIX2VQ0HiR0AOAQP4Zrr0ANx2lwbQKzax1Qryd0JyG86gGtrPfvo0rqqud7K3NVXoegq+rK5/urPsV69iwiigIsEatUz5xFRRTgi1o2z+7vP7y/T5tJ6a0bmn7fV9c8TEsLyXJX+euFeGPpLubt5UOGFUc6j7g0XjVq+1qVSZUbG4K2ulUaN3Q5SA1vLo9wLv/ZruXDzJEIzBtN8ddLywpJS/tSO2kzlb9rF7UoKCUP6PPGPJZSdMntMDpwQJPhV8ztGDYsXPsHxuFDhyCbLsxrL0bCIcmpuk5IlEV5+I0O6wPIBIzccCnZWWeZk/G2Ix1gvBHfYLOg2O3Fw/ll+uqGqSY8Zl9WNgSfBQ++vJbS7WWWYeoasQYpKoow4o3SCwpwFW88AkMNvUtKkIWBG0EaNrUENPAYbHB1Nc0w89pLIWsNvB/35bkfTVTvQY7Ahz9jhYEXONaWfd0n43qryf+m3TtdScUMktbUmaTo/U4aPOR0TDBUpQb1+7KdxrVEfkrcyzpuyEVb6red5zdPJzAAAADA/1voLjTg/7/+uDRGNRT4jx5Dz8FuFP7t13f1pgm/2sRGCDwPdvz1svSSE0nykZxxxgQxyA/5VyZYMt8qsdpMnyV9wDBc0BX99Mk/5nEZ2slPPqFt0oaiZQaqtjk0iWvQ0LMOTW2b0LUqe3bPuEFckR2smAwQRmyFYsgTVCMuo0l8BA1TPkHTSLjQdRCWS/YsRD5MF0KlGF4/yA03iWTToVF4pbSvUJwynfwk6fIATINCvIk9NSRljOje6Uw1gUS4hh3sRlXF0AoXZHSUqbbzcXBb2JlGhmtraJcgSJEYaPIDOhmskai11dD3+SuS6lWQxFT88D8R0ckbB6GChKRA9+omVcW2tB7sLTUzhEq4VxvBaiALnaQSowwMCO9UIIYa6cgRbs0FU7W2tOpR/dp6CddBl7BMRokaGQ3dM2zSGItcbR+O7GvkV+6komUB') format('woff2'),

url('./iconfont.woff?t=1575438268370') format('woff'),

url('./iconfont.ttf?t=1575438268370') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('./iconfont.svg?t=1575438268370#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;

}

`;

10 全局引入 iconfont.js

# src/index.js

import React, {Fragment} from 'react';

import ReactDOM from 'react-dom';

import { Globalstyle } from './style.js';

import { IconStyle } from './statics/iconfont/iconfont';

import App from './App';

const NewApp = (<Fragment>

<Globalstyle />

<IconStyle />

<App />

</Fragment>);

ReactDOM.render(NewApp, document.getElementById('root'));

11 将原有 的文字 替换为 iconfont 标签

#src/common/header/index.js

import React, {Component} from 'react';

import {

HeaderWrapper,

Logo,

Nav,

NavItem,

NavSearch,

Addtion,

Button

} from './style';

class Header extends Component{

render(){

return (

<HeaderWrapper>

<Logo />

<Nav>

<NavItem className="left active">首页</NavItem>

<NavItem className="left">下载</NavItem>

<NavItem className="right">登陆</NavItem>

<NavItem className="right">

<span className="iconfont">&#xe601;</span>

</NavItem>

<NavSearch ></NavSearch>

<span className="iconfont">&#xe60b;</span>

</Nav>

<Addtion>

<Button className='writting'>

<span className="iconfont">&#xe703;</span>

写文章

</Button>

<Button className='reg'>注册</Button>

</Addtion>

</HeaderWrapper>

);

}

}

export default Header;

12 整理头部布局

src/common/header/style.js

import styled from 'styled-components';

import LogoPic from '../../statics/logo.png';

export const HeaderWrapper = styled.div`

postition: relate;

height:56px;

border-bottom:1px solid #f0f0f0;

`;

export const Logo = styled.a.attrs({

href : '/'

})`

position: absolute;

left : 0;

top : 0;

display: block;

height:56px;

width:100px;

background: url(${LogoPic}) no-repeat;

background-size: contain;

`;

export const Nav = styled.div`

width:960px;

box-size: box-size;

padding-right: 70px;

height: 56px;

margin-left: 100px;

`

export const NavItem = styled.div`

&.left {

float: left;

}

&.right {

float: right;

color: #969696;

}

&.active {

color: #ea6f5a;

}

line-height: 56px;

front-size: 15px;

padding-left: 6px;

padding-right: 12px;

color: #333;

`;

export const SearchWrapper = styled.div`

float: left;

position: relative;

.iconfont {

position: absolute;

right: 5px;

bottom: 5px;

width: 30px;

line-height:30px;

border-radius : 15px;

text-align:center;

}

`;

export const NavSearch = styled.input.attrs({

placeholder : '搜索'

})`

width : 160px;

height : 38px;

border: none;

outline : none;

padding : 0 20px;

box-size: box-size;

margin-top: 9px;

margin-left: 20px;

border-radius : 19px;

background: #eee;

font-size: 14px;

&::placeholder:

`;

export const Addtion = styled.div`

position:absolute;

right: 0;

top: 0;

height: 65px;

`;

export const Button = styled.div`

float:right;

line-height:38px;

margin-top:9px;

margin-right: 20px;

border-radius: 19px;

border : 1px solid rgba(236,97,73,.7);

color : #fff;

padding : 0 20px;

&.reg{

color:#ea6f5a;

}

&.writting{

background:#ea6f5a;

}

`;