微信小程序添加字体图标

原文参考

如何在微信小程序中添加外部字体图标,如阿里字库

阿里字库

下载字体包,将.ttf文件上传 进行base 64编码 格式转码 https://transfonter.org/

下载文件

 

打开刚刚我们经过转换的解压出来的文件,找到stylesheet.css,将其中的内容全部复制到index. wxss(或者 复制代码到app.wxss文件里,可以全局也可以局部 )文件中。注意是转换过的那个文件。

2.
打开没有转换过的download.zip解压出来的文件,找到iconfont.css文件,将这个文件中的没有打岔的内容复制到index. wxss文件中。@font-face这部分不要,只要下边的这部分

在index.wxml中使用字体图标。代码如下:

<!--index.wxml-->
<view class="container">
个人中心
<text class="iconfont icon-wode" style="font-size:50px;color:red"></text>
</view>

到这里微信小程序的字体图标的使用就完成了,这里经过转换成64位编码之后,直接将样式放在wxss文件中即可,相当简洁

原文参考

展开阅读全文

没有更多推荐了,返回首页