小程序页面引入iconfont的css文件

刚写demo写到这里,一直用的图片,花了几分钟琢磨了一下字体文件引入方式;在这里做个分享也方便自己以后使用记录,请大家多多指教!

小程序引入外部文件的方式是:@import "*/*.wxss";

如果所有页面都要使用的话:@import"/lib/style/font.wxss",用这种方式导入到app.wxss就可以了。

在此之前要做的准备工作:

1.在iconfont网站http://iconfont.cn/下载图标代码;

2.找到.ttf文件,在https://transfonter.org/进行base64格式转码之后下载;转码后的文件像这样


3.准备一个目录,新建一个wxss文件,将下载转码后的 iconfont.css内容复制到新建的wxss文件中,我的文件目录结构为:


注:我这里的eot,woff等文件是用转码后的文件做了替换的,没有替换的情况能不能成功我没有试过。

4.在app.wxss中引入@import"/lib/style/font.wxss;

最后一步就是按照平常的方式,在代码中用iconfont + 图标类名进行使用。

如果看完了没有明白,这里附上原教程地址:【微信小程序】——wxss引用外部CSS文件及iconfont

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容