微信小程序引入外部的CSS或iconfont

这篇具有很好参考价值的文章主要介绍了微信小程序引入外部的CSS或iconfont。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用外部样式的方法是:

@import '相对路径下的外部样式文件.wxss';

iconfont作为一种特殊的CSS也逃不开这个命运,小程序的wxss文件font-face中的url不接受HTTP地址参数,但是接受base64,因此而我们可以将字体文件下载后转化为base64.

方案如下:

1、到阿里巴巴矢量图标库(iconfont-阿里巴巴矢量图标库)寻找需要的字体图标,并下载,在压缩包中找到ttf格式文件

微信小程序引入外部的CSS或iconfont

 

2、使用线上平台工具 (Online @font-face generator — Transfonter)将字体文件转化base64格式

​​​​​​​

微信小程序引入外部的CSS或iconfont

微信小程序引入外部的CSS或iconfont

微信小程序引入外部的CSS或iconfont

将下载文件目录下.css文件直接修改成.wcss文件,放置到项目目录下,在开发者工具中打开,复制下面加在文件中

[class^="icon-"],

[class*=" icon-"] {

  /* use !important to prevent issues with browser extensions that change fonts */

  font-family: 'iconfont' !important;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  /* Better Font Rendering  */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

将第一步中下载的文件中iconfont.css用记事板打开复制选中代码

微信小程序引入外部的CSS或iconfont微信小程序引入外部的CSS或iconfont

保存文件,就可以在需要地方引入文件了,在wxml中就可以使用图标了

<text class="iconfont weixin2" ></text>文章来源地址https://www.toymoban.com/news/detail-445223.html

到了这里,关于微信小程序引入外部的CSS或iconfont的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包