使用外部样式的方法是:
@import '相对路径下的外部样式文件.wxss';
iconfont作为一种特殊的CSS也逃不开这个命运,小程序的wxss文件font-face中的url不接受HTTP地址参数,但是接受base64,因此而我们可以将字体文件下载后转化为base64.
方案如下:
1、到阿里巴巴矢量图标库(iconfont-阿里巴巴矢量图标库)寻找需要的字体图标,并下载,在压缩包中找到ttf格式文件
2、使用线上平台工具 (Online @font-face generator — Transfonter)将字体文件转化base64格式
将下载文件目录下.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用记事板打开复制选中代码
保存文件,就可以在需要地方引入文件了,在wxml中就可以使用图标了文章来源:https://www.toymoban.com/news/detail-445223.html
<text class="iconfont weixin2" ></text>文章来源地址https://www.toymoban.com/news/detail-445223.html
到了这里,关于微信小程序引入外部的CSS或iconfont的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!