iconfont图标_小程序使用 Iconfont 的正确姿势
前言
现如今移动设备分辨率不胜枚举,传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点,在图标方面有着极大的优势。
Iconfont 是由阿里推出,功能强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,几乎国内成了矢量图标库的事实标准。
每个 Iconfont 项目都可以生成一个远程 .css
文件,下文以 //at.alicdn.com/t/font_883452_bqb4vsc7km8.css
为例。你可以查阅教程了解如何生成 .css
文件。
正常 Iconfont 的使用流程是在 HTML 的 head
标签中引入样式文件,然后通过类名调用图标
<html><head><link href="//at.alicdn.com/t/font_883452_bqb4vsc7km8.css" /></head><body><!-- 这是一个名为 plus 的 icon --><i class="iconfont icon-plus"></i></body>
</html>
不幸的是小程序不支持引入外部 css 文件,为此我寻遍网络,竟没有找到 Iconfont 在小程序中的正确用法。
本文根据我在实践经验所得,是我目前能找到在小程序中使用 Iconfont 最简的方法。
引入
虽然小程序不支持引入外部样式表,但 .wxss
文件本质上就是 .css
文件,因此我们可以将 Iconfont 的样式表保存到本地的 .wxss
中。
1. 下载 at.alicdn.com/t/font_883452_bqb4vsc7km8.css
至 /iconfont.wxss
,并在 app.wxss
中引入
@import "/iconfont.wxss";
2. 在 .wxml
文件中使用
<text class="iconfont icon-plus"></text>
现在应该可以在开发者工具中看到你想要的图标了。
解决了基本的使用问题之后,我们发现,由于小程序组件内部有独立的类作用域,因此在 app.wxss
中引入的 .iconfont
和 .icon-plus
并不能在自定义组件内生效,所以你需要在所有需要用到 Iconfont 的组件内,分别引入 iconfont.wxss
。
组件化
如果你看过我之前的文章,应该知道我对冗余代码深恶痛绝。自定义组件就是解决重复引入的手段。
定义一个 iconfont
组件
- iconfont.wxss
引入下载好的 Iconfont 样式表
@import "/iconfont.wxss"
- iconfont.js
声明组件参数
Component({properties: {icon: String,
},
})
- iconfont.wxml
<text class="iconfont icon-{{icon}}"></text>
外部调用
- page.json
引用组件
{"usingComponents": {"iconfont": "path/to/iconfont"
}
}
- page.wxml
<iconfont icon="plus"></iconfont>
后记
现在你已经有了一个强大的组件,应付 Iconfont 上的任何项目应该都不在话下。但现在,你不能在外部控制 iconfont
组件的字体大小,下一篇文章我们会讨论这个话题,在这之前,你可以使用 minapp-iconfont 获得完整的特性。
关注我,不仅仅是小程序。
iconfont图标_小程序使用 Iconfont 的正确姿势相关推荐
- 如何分享10亿月活红利?揭秘拥抱小程序电商的正确姿势
对于很多电商中小企业来说,小程序可能还只是一个模糊的概念.但是小程序电商这一巨大风口已经到来.根据不久前调研机构QuestMobile发布的2018<微信小程序洞察报告>,微信小程序月活跃 ...
- 阿里矢量图标iconfont在微信小程序的使用
阿里矢量图标iconfont在微信小程序的使用 第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 ...
- 微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
- 微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 打开目标项目,下 ...
- [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题 参考文章: (1)[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题 (2) ...
- 小程序引入iconfont字体图标
1.挑选图标,加入项目 2.进入项目,下载到本地 3.解压文件后,复制iconfont.css放到小程序项目里,并重命名,修改为iconfont.wxss.并在app.wxss内引入该样式. @imp ...
- 微信小程序引入iconfont字体图标(阿里巴巴矢量图标库)
微信小程序怎么引入iconfont字体图标 由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图 标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
- 微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名 支持多色 兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
- 小程序-滑块+iconfont下载本地使用
效果 <view style="padding: 5px;"><movable-area style="width: 100%;height: 100% ...
最新文章
- lucene .doc里存储的skiplist跳表
- [Hbase]Hbase章2 Hbase读写过程解析
- Eclipse中的常用快捷键
- 将mysql的变量置为0_MySQL 8.0 全局变量的修改持久化 set persist
- VMM2012应用指南之3-安装VMM2012
- java时序图工具_基于时序数据库,实现百亿级话单实时全景监控分析
- 亚洲综合竞争力排名发布:韩国位居第1,中国第9,大家怎么看?
- Spring Boot通过url设置国际化
- ubuntu drbd双机互备
- FireFox使用百度网盘插件
- ExtJS之EditorGridPanel
- ssis连接oracle报错,SSIS连接Oracle问题汇总
- zTree树形中的搜索定位
- 蓝桥杯基础-【切面条】不用画图的解题思路
- 为何丧尸只会攻击人类,而不“咬”动物?
- Course 1 神经网络和深度学习 Week4 搭建多层神经网络识别猫图
- paperpaper论文查重入口?
- 公交司机脚下热浪烫爆温度计
- 王爽汇编语言 实验3
- win10设置虚拟内存_原来win10这样设置,电脑就能释放30G,比win7运行还顺畅
热门文章
- avformat_find_stream_info 时间太长
- 目标检测 RCNN算法详解
- tensorflow 学习:用CNN进行图像分类
- OpenCV GPU 简单遍历图像
- Opencv 实现图像的离散傅里叶变换(DFT)、卷积运算(相关滤波)
- 有趣的c语言程序Code,一个有趣的小程序
- java虚拟机 什么语言_什么是Java虚拟机?为什么Java被称为平台无关的编程语言...
- Java 反射修改类的常量值、静态变量值、属性值
- oracle数据库从关闭到启动,Oracle数据库的启动和关闭详细过程
- Jenkins之邮件通知