(一)需求

1、生成在线稳定可用的icon文件;
2、CDN加速;
3、免费;

(二)步骤

1、注册登录网站

https://www.iconfont.cn/

2、搜索并添加需要的icon到购物车中

3、按照图片步骤将店家添加的文件生成在线的CDN链接

(三)使用

1、生成的地址链接

//at.alicdn.com/t/font_2456504_20a1vhx69jb.css

2、里面的代码如下:

@font-face {
  font-family: "iconfont"; /* Project id 2456504 */
  src: url('//at.alicdn.com/t/font_2456504_20a1vhx69jb.woff2?t=1638774752712') format('woff2'),
       url('//at.alicdn.com/t/font_2456504_20a1vhx69jb.woff?t=1638774752712') format('woff'),
       url('//at.alicdn.com/t/font_2456504_20a1vhx69jb.ttf?t=1638774752712') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconriFill-file-transfer-fill:before {
  content: "\e601";
}

.iconliebiao:before {
  content: "\e779";
}

.iconOCRshibie:before {
  content: "\e61a";
}

.iconzhijian:before {
  content: "\e6e4";
}

3、项目中引入及使用

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2456504_20a1vhx69jb.css">
<i className="iconfont iconriFill-file-transfer-fill" style={{ transform: "scale(1.3)" }}></i>
03-05 21:33