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"></span>
</NavItem>
<NavSearch ></NavSearch>
<span className="iconfont"></span>
</Nav>
<Addtion>
<Button className='writting'>
<span className="iconfont"></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;
}
`;
