ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

react中如何使用iconfont

2020-04-30 12:03:57  阅读:252  来源: 互联网

标签:format url iconfont js react 如何 1588212806844 font


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

 

标签:format,url,iconfont,js,react,如何,1588212806844,font
来源: https://www.cnblogs.com/sinceForever/p/12807950.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有