微信小程序开发小技巧:使用 iconfont 图标字体

2021-08-1907:49:12APP与小程序开发Comments2,715 views字数 454阅读模式

Web 开发中 iconfont 可谓是最常用的灵活图标字体工具了,这里介绍一下如何在微信小程序中引入 iconfont 图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

首先找到你想使用的图标们,点击购物车之后下载到本地。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

微信小程序开发小技巧:使用 iconfont 图标字体文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

下载到本地是一个压缩包,解压缩之后将 iconfont.css 文件复制到微信小程序的 styles 文件夹中 (在下的习惯,也可以放到你想放的地方比如 fonts),将后缀改为 .wxss文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

微信小程序开发小技巧:使用 iconfont 图标字体文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

在 app.wxss 中引入样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

@import "styles/iconfont.wxss";

然后在 .wxml 中就可以使用刚刚你添加的图标了,Web 使用 i 标签,小程序中使用 text 标签:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

<text class="iconfont icon-my-edit" style="color: blue"></text>

如果后面要加新的图标,要下载新的 iconfont.css 的文件到本地重命名并覆盖,重新走一遍这个流程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

当然,如果你使用的样式库提供的一些 icon 能满足你的要求,那更好,就不用引入外部图标字体文件了,不过大部分情况下是不满足的 ?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22177.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/22177.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定