3.使用iconfond嵌入头部图标19-06-04

作者: 你坤儿姐 | 来源:发表于2019-06-05 17:31 被阅读0次

3.使用iconfond嵌入头部图标19-06-04
10.项目实战：Header组件开发（二）
jsp中使用javabean
cgo
字体图标
react native 字体图标
UIWebView添加头部视图UIView
element-ui Input 标签后加搜索图标
第一章 HTML
产品视觉现状评析

代码见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">&#x33</i>这种样式引用选中的图标。

      <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载App</NavItem>
        <NavItem className='right'>登录</NavItem>
        <NavItem className='right'>
          <i className="iconfont">&#xe602;</i>
        </NavItem>
        <SearchWrapper>
        <NavSearch></NavSearch>
        <i className="iconfont">&#xe625;</i>
        </SearchWrapper>
      </Nav>
      <Addition>
        <Button className='writting'>
          <i className="iconfont">&#xe616;</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;  
  }
`;