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;

    }

`;