第一步:打开阿里巴巴矢量图标网站,搜索想要的icon
https://www.iconfont.cn/?spm=a313x.search_index.i3.2.19f33a81gfo5r0
第二步:添加购物车,并且下载代码。如下图:
下载代码解压后得到一下文件:
第三步:打开Transfonter网址(https://transfonter.org/);
第四步:点击“Add fonts”按钮,将下载的iconfont.ttf文件上传上去。
第五步:开启Base64 encode;如下图配置:
第六步:点击convert按钮,然后下载:
解压下载的文件如下:
第七步:将stylesheet.css的内容复制到iconfont.css并替换掉@font-face{}部分,然后在项目中引入iconfont.css文件。
然后即可通过使用对应的class来现实图标了
@font-face {
font-family: 'iconfont';
src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'),
url('data:font/woff;charset=utf-8;base64,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') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon18:before {
content: "\e628";
}
<view class="iconfont icon-icon18"></view>
(提示:需要两个className同时使用才有效, 即iconfont 和 icon-icon18)