微信小程序开发小技巧:使用 iconfont 图标字体
Web 开发中 iconfont 可谓是最常用的灵活图标字体工具了,这里介绍一下如何在微信小程序中引入 iconfont 图标。
首先找到你想使用的图标们,点击购物车之后下载到本地。
下载到本地是一个压缩包,解压缩之后将 iconfont.css
文件复制到微信小程序的 styles
文件夹中 (在下的习惯,也可以放到你想放的地方比如 fonts
),将后缀改为 .wxss
在 app.wxss
中引入样式:
@import "styles/iconfont.wxss";
然后在 .wxml
中就可以使用刚刚你添加的图标了,Web 使用 i
标签,小程序中使用 text
标签:
<text class="iconfont icon-my-edit" style="color: blue"></text>
如果后面要加新的图标,要下载新的 iconfont.css
的文件到本地重命名并覆盖,重新走一遍这个流程。
当然,如果你使用的样式库提供的一些 icon 能满足你的要求,那更好,就不用引入外部图标字体文件了,不过大部分情况下是不满足的 ?
THE END