sinceForever

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

 

分类:

技术点:

相关文章: