iconfont文件里面包含 iconfont.ttf、iconfont.css, 将 iconfont.ttf文件转位 base64。
推荐转换工具地址:https://www.giftofspeed.com/base64-encoder/
然后打开 iconfont.css文件,修改 @font-face 部分,将转换好的 base64代码粘贴到对应位置,并且设置 代码如下:
@font-face {
font-family: "iconfont";
src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');
}
.iconfont {
display: inline-block;
}
最后则再项目中App.vue中引入iconfont.css文件
<style>
@import "./font/iconfont.css";
</style>
在任意组件中使用方法:
<view class="iconfont icon-XXX"></view>
经测试在H5及小程序中可以正常使用
备注:
iconfont文件是使用的阿里图标库: https://www.iconfont.cn
24 个评论
要回复文章请先登录或注册
leah_huang
DCloud_heavensoft
LuxSun
3***@qq.com