微信小程序使用自定义字体 - iconfont
编辑于 2021-07-07 16:24:27 阅读 2144
步骤
1、在iconfont网站获取iconfont.ttf字体文件
下载后解压,得到stylesheet.css
,将此文件里的代码复制到app.wxss
3、再次回到iconfont
点击图片中的css文件链接,将里面的除了@font-face部分,其他都复制到app.wxss
,最终app.wxss
文件内容如下
@font-face {
font-family: 'iconfont';
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABA...') format('woff2'),
url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAA...') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shou:before {
content: "\e69b";
color: #ff6400;
margin-right: 10px;
}
.icon-ji:before {
content: "\e600";
color: #015CD7;
margin-right: 10px;
}
使用
<text class="iconfont icon-ji"></text>
配合vant-weapp一起使用
<van-icon class-prefix="iconfont icon-ji" name="extra" />