小程序中使用iconfont

阅读 1798
收藏 5
2018-01-11
原文链接:aaronxue.top
  • web开发中使用字体图标有很多好处,比如:矢量(无论如何缩放都保持高清)、体积小等等
  • 小程序开发与平时web开发类似,也可以使用字体图标,但是src:url()无论本地还是远程地址都不行,base64值则都是可以显示的

    先到字体图标库下载字体图标,找到ttf文件

  • 我下载了icomoon里的一套字体

将ttf文件转换成base64

  • 打开这个平台transfonter.org/
  • 点击Add fonts按钮,加载ttf格式的那个文件
  • 将下边的base64 encode改为on
  • 点击Convert按钮 进行转换
  • 转换后点击download下载

新建font.wxss文件,并在app.wxss引用font.wxss

  • 复制下载的压缩文件中的stylesheet.css的内容到font.wxss,并且将icomoon中的style.css除了@font-face所有的代码也复制到font.wxss并将i选择器换成.iconfont

最后就可以在wxml中使用字体了

<text class="iconfont icon-home" style="font-size:50px;color:red"></text>

评论