微信小程序怎么使用icon

小程序怎么使用icon

第一步 下载icon

我选择的图标库是阿里图标官网加入购物车

《微信小程序怎么使用icon》

《微信小程序怎么使用icon》

《微信小程序怎么使用icon》

《微信小程序怎么使用icon》

第二步 转换ttf

因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用

《微信小程序怎么使用icon》

  • 按照上图1,2,3的步骤 转换完成, 点击Download

《微信小程序怎么使用icon》

《微信小程序怎么使用icon》

第三步 在微信小程序中使用icon

  • 解压 第二步中的文件夹找到stylesheet.css 文件

《微信小程序怎么使用icon》

  • 打开第一步中压缩包的iconfont.css,把里面圈红的部分(即fontface部分我们不需要啦)复制到stylesheet.css

《微信小程序怎么使用icon》

  • 修改后的stylesheet.css

《微信小程序怎么使用icon》

  • 修改stylesheet.css的文件后缀为wxss,即stylesheet.wxss
  • 把stylesheet.wxss放进微信小程序的公共文件里面,然后把整个文件import到页面的样式表里

《微信小程序怎么使用icon》

《微信小程序怎么使用icon》

  • 在wxml页面引入使用

《微信小程序怎么使用icon》

完结

原文地址

    原文作者:znmdcoco
    原文地址: https://segmentfault.com/a/1190000018974525
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞