微信小程序引用 iconfont
2021/8/17 17:06:28
本文主要是介绍微信小程序引用 iconfont,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文地址: https://www.cnblogs.com/veinyin/p/15152278.html
基于通过微信开发者工具新建的原始微信小程序工程
由于无 css 文件,取而代之的是 wxss,通过 symbol 和 font class 在线引入的方式不再适用
可以采用以下方式,需要创建一个 iconfont 的 wxss 文件,引入后就可以全局使用了
1 在工程目录下创建一个 iconfont.wxss 文件,在 app.wxss 中引入
2 类型选择 font class,点击链接,在新窗口预览 css 内容,全部复制
3 将复制的 iconfont 相关类贴到 iconfont.wxss 中
4 使用,size 和 color 不生效,需要设置 class 之后,在样式里面设置
<icon class="iconfont icon-jiarufangjian-01"></icon>
补充内容:
1 图标字体小程序推荐 ttf、woff (woff2不兼容低版本iOS)
2 如果有彩色图标,但是使用时是黑白的,可以将 iconfont 网站,项目设置/字体格式/彩色 勾选上
3 如果有图标更新、需要将 iconfont.wxss 更新为新生成的 CSS 内容
4 如果按照以上流程操作,图标还是没有展示出来,可以重新打开模拟器试试
这篇关于微信小程序引用 iconfont的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享