微信小程序> 微信小程序引用iconfont实测版

微信小程序引用iconfont实测版

浏览量:547 时间: 来源:DauntLess_FYQ

1.H5引用图标库的方式为URL引入,但是在小程序中不支持 URL方式,需要使用base64方式直接引入

@font-face {  font-family: 'FontAwesome';  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');  font-weight: normal;  font-style: normal;}

问题:

A:怎么样将字体换转换为base64

B:转换后怎么使用

=======》

A:将iconfont.ttf转换即可。转换地址:https://transfonter.org/ 

小程序

下载下来的文件目录:

小程序


B 使用:

1)将stylesheet.css 转换为.wxss文件

小程序

2)将原有的iconfont 使用文件也转换为.wxss文件 ;并且将原有的 @font 相关的删掉;然后按下图添加

font-family: 'iconfont';

小程序

3)在app.wxss 中依次引入这两个文件,然后在使用即可

小程序

小程序

小程序


===》game over





版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎