现如今移动设备分辨率不胜枚举,传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点,在图标方面有着极大的优势。 Iconfont 是由阿里推出,功能强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,几乎国内成了矢量图标库的事实标准。 每个 Iconfont 项目都可以生成一个远程 正常 Iconfont 的使用流程是在 HTML 的 <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 最简的方法。 引入虽然小程序不支持引入外部样式表,但
现在应该可以在开发者工具中看到你想要的图标了。 解决了基本的使用问题之后,我们发现,由于小程序组件内部有独立的类作用域,因此在 组件化如果你看过我之前的文章,应该知道我对冗余代码深恶痛绝。自定义组件就是解决重复引入的手段。 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码