• 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文件中引入上一步配置的内容

  • 相关阅读:
    shell编程基础
    centos7怎么查看、打开和关闭防火墙
    Linux下查看根目录各文件内存占用情况
    两台Linux系统之间传输文件的几种方法
    rabbitmq3.8版本默认用户guest访问报错User can only log in via localhost解决方案
    docker 部署java web应用_使用Docker部署JavaWeb项目
    ubuntu安装curl命令
    docker重新进入容器时“/etc/profile”中环境变量失效问题的解决
    在docker容器中安装软件,并重新生成镜像
    CentOS7安装RabbitMQ
  • 原文地址:https://www.cnblogs.com/sinceForever/p/12807950.html
Copyright © 2020-2023  润新知