zoukankan      html  css  js  c++  java
  • react中如何使用iconfont

    react中如何使用iconfont

    1, 新建项目

     

    2, 搜索想要的图标,输入关键字查询即

    3, 点击加入购物车。

    4, 在购物车中点击下载至本地。

    5, 保留.eot, .css, .svg, .woff, .ttf五个文件,其余均可删除。

    6, 将刚刚保留下来的.css文件后缀改为.js。

    7, 打开.js文件(iconfont.js)修改如下

     代码如下,

    import {createGlobalStyle} from 'styled-components';
    export const GlobalStyledicon = createGlobalStyle`
    @font-face {font-family: "iconfont";
      src: url('./iconfont.eot?t=1588212806844'); /* IE9 */
      src: url('./iconfont.eot?t=1588212806844#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAS4AAsAAAAACQQAAARpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFIIRcATYCJAMUCwwABCAFhG0HTBvsB8ieBTlZfApFaFPnCsf/JIuH/9Ze75uZ3Wzmh0ABkEtaPr4sZFkBq8oqkKoVsrU9no34w79nvtZLDmrPWyYdzGBQkfRS5ZamA9uZDCb/GQ0QADK8/P99/u+d/tbxLJzXnuWy5sC486kTYDSBsnBPX5SVRwWEDWM3EYdxnkA1rxvZ9ZIqFGgVYFogntIWA9DGHEoJN3TmNmdtEZ+BSpc+yq8BPrm/j/8S0pI0Gbjoxv1iM8j7FfXmtcLz36NP9gJPfz5Im8jYBRTiWW7gKYVf2KVQjcFKlwFVJ0l99Ut50//N6/8JNSsyVVggS8afJ1rAMMRyLuvLzikxIfMrhZD41Z8Q/HqtujGGhjNVrvQDgDhgOas3TYokzeq12mk4OKB7O8tUeGqoJBHnhfw0jEg7I+I8j3rmOxbMC/EGTBETMnE0UxDg4qssXOAP3fNBIRvcs9eCltCysB6Go/BUAGrUb3XKDZmXILzuCVnYvk3AsxmeelYme4+flGRid88QBGyqlIk14vwU/ITolXKlqdhxwcMPhzbw6LpdUQuOQFM6HeJRntfpjnXqNm+xbv6kjlt4Nhde31F4SUgPW4Z6tzTxz/B5+mn4ly7YMLc3kQhJylwYul/QwQulrpKkm3+vxfkkGzrT13tNKHhmTQtc11SiHTnXOiS/DAyI2UxEH00vuG/dBn0wNpbuAcpfVPw7X/rCo8a2KR3X2GAC84boB+is4BRVertT0W3S77+xULTm1GLyAiOdIyl/57i482mxMtWVGKYzTvv2hSvzMl71I7ir4brfEe0/tm8Jklcza8aSbs5s5fh9O8fLoZTupRyvnLBv13hZdyyMWjBn/u1T5UUnEC+gLdq/NiD8TJB1j6LuW3s6LTMo7ToSEm1cvmtP+rCshX4nU4NrsgaWJbrNWt93MjRSfuF7lao9e/Holv0U1lGtf6wrP7k/hM5XPfuS33D8OFNFBu0MGWuvOLSvoF47I31MCrt5S8WEXfrEfqJ8h3qR0pz0rs3q3j3rwBBgXF6QbwagP5/K8Ul35G/7eooif/h5xnnZDozo75/1VQtftfTPW1iJq6lnAH+AUW3lr2IroIT6qzHVwNkUvRo7+vRk46YBDMloqvhBIhOe9GOcHkXBhzrTIZIBc8g6q4zC2UWj5xStziVUO0o390xiKUQZxLbxDMKYnUhGfEU25jqjcB6jMeMtWmMpUN2L4D171qOhQpY0cKQZMQ5FaBPjpJCbg7zKBtLithvYqNrl4yTrotNIfExcslxKOkm2jwWuQZYEjqMQimUcSAlzGWm3M0gzy1hJExfTxHHNGbGxVN6DYkyMA0CuYZEMOCQzhNFQCJoJw4mijTlQ6vsNSBZudgZsCa0hiSOxXOjeEfFixNVglBqctWjnMthlEIsEHA7FT6KwGA6IEtZHssMCA9GcP8qKZMKJ0dQi1yxDLFePqmuIGd/kuMZdUIFjmkiRo0QTrfrQbXAOpelR8nyD2sW4XW5GM9TtMDBGGgAAAAA=') format('woff2'),
      url('./iconfont.woff?t=1588212806844') format('woff'),
      url('./iconfont.ttf?t=1588212806844') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('./iconfont.svg?t=1588212806844#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;
    }

    8, 在app.js文件中引入上一步配置的内容

  • 相关阅读:
    jsp转向
    什么是 XDoclet?
    tomcat中的几点配置说明
    mysql5问题
    POJ 3734 Blocks
    POJ 2409 Let it Bead
    HDU 1171 Big Event in HDU
    POJ 3046 Ant Counting
    HDU 2082 找单词
    POJ 1286 Necklace of Beads
  • 原文地址:https://www.cnblogs.com/sinceForever/p/12807950.html
Copyright © 2011-2022 走看看