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

【微信小程序】使用Iconfont

1、准备好Iconfont字体图标素材在官网http:www.iconfont.cn中将想要的图标加入购物车,然后从购物车添加至某一项目下载该项目解压文件ÿ

1、准备好Iconfont字体图标素材

在官网http://www.iconfont.cn中将想要的图标加入购物车,然后从购物车添加至某一项目
添加到项目
下载该项目
这里写图片描述
解压文件,只需要用到文件iconfont.css
这里写图片描述

2、运用到代码中
因为项目用到的字体图标较多,所以复制了整个iconfont.css,并没有去做任何改动,用到字体图标的页面在css中去引用就行,例如@import ‘…/iconfont/iconfont.wxss’;
在wxml中写:


图标代码可以在网站上复制这里写图片描述这里写图片描述;颜色和大小也可自定义设置;

3、注意的问题
(1)iconfont有三种使用模式,见官网说明,在这里用font-class引用,因此不支持彩色图标;
(2)使用的图标最好是单一的图片路径,不然更改颜色后会整个变色,怎么去辨别图标是否单一路径?编辑图标时去改变颜色,如果达到你想要的效果就可以了;
这里写图片描述
(3)有新增的图标怎么办?将图标添加到原项目,下载到本地,更新iconfont.css即可

也看了网上别的博主发的使用教程,有点不一样,但本人使用下来并没有发生什么问题,看大家喜欢或习惯哪一种咯
本篇博客旨在记录了自己在前端编程过程中碰到的一部分问题,如有错误的地方欢迎指正


推荐阅读
  • 三周学会小程序第七讲:提交问题
    截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 解决基于XML配置的MyBatis在Spring整合中出现“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”问题的方法
    在将Spring与MyBatis进行整合时,作者遇到了“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”的问题。该问题主要出现在使用XML文件配置DAO层的情况下,而注解方式配置则未出现类似问题。作者详细分析了两个配置文件之间的差异,并最终找到了解决方案。本文将详细介绍问题的原因及解决方法,帮助读者避免类似问题的发生。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 织梦系统多条件联动筛选功能详细教程及删除操作指南
    多条件联动筛选功能广泛应用于图片展示、装修设计、机械设备和在线商城等场景,通常筛选条件应聚焦于用户最关心的要素,而非涵盖所有可能的选项。在DedeCMS中,多条件筛选的PHP开发并未内置删除已选条件的功能,但通过理解PHP筛选与JS筛选的不同机制,实现这一功能相对简单且易于操作。 ... [详细]
  • 本文介绍了Android动画的基本概念及其主要类型。Android动画主要包括三种形式:视图动画(也称为补间动画或Tween动画),主要通过改变视图的属性来实现动态效果;帧动画,通过顺序播放一系列预定义的图像来模拟动画效果;以及属性动画,通过对对象的属性进行平滑过渡来创建更加复杂的动画效果。每种类型的动画都有其独特的应用场景和实现方式,开发者可以根据具体需求选择合适的动画类型。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 后端开发|php教程numbering,addClass,COOKIE,POST,instanceof后端开发-php教程一:php变量商场项目源码,ubuntu安装其他系统,to ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • PHP中元素的计量单位是什么? ... [详细]
  • 从零起步:使用IntelliJ IDEA搭建Spring Boot应用的详细指南
    从零起步:使用IntelliJ IDEA搭建Spring Boot应用的详细指南 ... [详细]
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社区 版权所有