标签: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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。