热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

iconfont图标_小程序引用Iconfont图标

选择图标下载代码1.添加项目2.选择Unicode3.下载代码4.解压文件5.拷贝iconfont.css到小程序目录注意:我这里用的是支付宝小程序做演示所有吧css后缀改成了ac
fd16f11f419744e4a4cce7b36472f80c.png
选择图标
bfcd5d88b351d53bfe13e07006c6c6a4.png
下载代码

1.添加项目

4603ad6909b4b3a41df09190ab61e6f4.png

2.选择 Unicode

f4e95f061cd8ae213895b8f0d887c7c1.png

3.下载代码

6a9e6aa77053787ae6a2d16176a4a443.png

4.解压文件

166a7387d4981f3774a47b143fa58399.png

5.拷贝iconfont.css到小程序目录

注意:我这里用的是支付宝小程序做演示 所有吧css后缀改成了 acss 如果是微信小程序的话 改成对应的.wxss 就好了

8834e1c1f5d8c3e2d5de7843d781ac5b.png
引用图标

可以单页面引用 也可以全局引用 如果是全局引用的话 则在app.acss/app.wxss中 引用即可 下面演示单页面引用方法

1.修改iconfont.css文件

打开刚才复制过来的css文件可以看到如下图所示 除了红框标识出来的base64 路径外 其他全部删掉

6c0a4d39cd439ac5cd89bfd2a418e01d.png

2.导入css

在页面对应的css 文件中 用 @import $PATH 引用图标

b662ceda2facf71fbcdb641309e676f7.png

3.使用图标

b42cc8f48b26e08a3a3eb0bae25f0b79.png

4.效果展示

cc0e16807ad5c9808da02912de3d9ef5.png
大功告成
f5c924f8b3a331f04eaf54aca3895e66.png

5. 注意

引用彩色图标的话 图标本身颜色会丢失 默认变成字体颜色

如下 我的彩色巧克力变成了灰色狗粑粑

91ce4ad1e89ac5651c3fbdfc98c6d720.png
5fdf6af8c48874e0c43b2f973a3f9139.png

iconfont图标好像只支持单色(此点有待研究 有其他发现或异议的 请于下方评论)




推荐阅读
  • 小程序引入外部文件的方式是:import**.wxss;因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引 ... [详细]
  • 微信小程序开发二三事
    怎么添加背景照片index页面文件夹下上传背景图片 ... [详细]
  • 微信小程序:弹窗组件封装popup.wxml ... [详细]
  • 1.支付能力a.开发步骤:1.登录开发中心,选择相应的小程序,进入该小程序详情页2.在小程序详情开发管理页面的功能列表中,点击右上角添加功能按钮,添加【小程序支付】功能,提交进入审 ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 本文讨论了如何在微信支付宝两套小程序中生成一张二维码,实现支付宝扫码进入支付宝小程序和微信扫码进入微信小程序的对应桌号进行点餐的功能,提供了一些实现方案供参考。 ... [详细]
  • 手把手教你使用GraphPad Prism和Excel绘制回归分析结果的森林图
    本文介绍了使用GraphPad Prism和Excel绘制回归分析结果的森林图的方法。通过展示森林图,可以更加直观地将回归分析结果可视化。GraphPad Prism是一款专门为医学专业人士设计的绘图软件,同时也兼顾统计分析的功能,操作便捷,可以帮助科研人员轻松绘制出高质量的专业图形。文章以一篇发表在JACC杂志上的研究为例,利用其中的多因素回归分析结果来绘制森林图。通过本文的指导,读者可以学会如何使用GraphPad Prism和Excel绘制回归分析结果的森林图。 ... [详细]
  • Python已成为全球最受欢迎的编程语言之一,然而Python程序的安全运行存在一定的风险。本文介绍了Python程序安全运行需要满足的三个条件,即系统路径上的每个条目都处于安全的位置、"主脚本"所在的目录始终位于系统路径中、若python命令使用-c和-m选项,调用程序的目录也必须是安全的。同时,文章还提出了一些预防措施,如避免将下载文件夹作为当前工作目录、使用pip所在路径而不是直接使用python命令等。对于初学Python的读者来说,这些内容将有所帮助。 ... [详细]
  • 生产环境下JVM调优参数的设置实例
     正文前先来一波福利推荐: 福利一:百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。福利二 ... [详细]
  • Java使用poi 5.0解析Excel工作簿的例子
    写在之前Excel文档是日常办公中非常普遍的一种数据记录模式。在业务场景中,往往有“导入Excel到某某系统中”的需求,所以这里记录一种使用poi5.0系 ... [详细]
  • 通过uni.getSystemInfoSync()可以同步获取系统信息,其中platform是获取客户端平台的switch(uni.getSystemInfoSyn ... [详细]
  • 小程序服务器获取用户名头像,微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现...
    这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些& ... [详细]
  • 微信持续赋能小程序,腾讯和阿里的线下之争看来势在必行
    回看小程序走过的路,可以说是荆棘密布,从最初的抱琵遮面,到发布时的万众期待,再到如今的不温不火,谁也没想到张小龙在微信之后最看中的产品,会是如此一波三折。昨日,微信小程序再次进行了一次较大规模的更新, ... [详细]
author-avatar
雅丽猫儿
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有