使用iconfont学习笔记
一、自定义iconfont的使用
iconfont解读
使用iconfont代替传统的图标有什么好处,以及相关的用法,这里也直接推荐一篇博文给大家:
http://www.frontopen.com/1906.html
本文固定链接: http://www.frontopen.com/1906.html【使用iconfont学习笔记】这里主要介绍iconfont上的字体图标使用方法
转载请注明: 品味人生 2014年02月25日
于 前端开拓者 发表
相信很多猿友图标都是在这里找的:http://www.iconfont.cn/
其实相关的说明 这里已经写地很详细了:http://www.iconfont.cn/plus/help/detail?helptype=code
但是还是跟着流程走一遍吧,这里讲的是android用法
1、首先将需要的图标加入购物车(ps:要建立自己的个人账号哈)
文章图片
Paste_Image.png 2、将购物车中的图标加入自己的分组里(项目名称)
文章图片
Paste_Image.png 3、来到自己的资料库,可以下载选好的资料包
文章图片
Paste_Image.png 下载完成后解压资料包:
文章图片
Paste_Image.png 注意下图中标记的三个文件:
文章图片
Paste_Image.png 我们需要将iconfont.ttf字体包放入assets目录中:
文章图片
Paste_Image.png 注意图标名称的配置
string中的name对应demo_symbol.html中的 下方名称:
文章图片
Paste_Image.png string中的value对应demo_unicode中的值:
文章图片
Paste_Image.png 4、具体使用 在布局文件中直接设置TextView text属性:
文章图片
Paste_Image.png 在代码中设置Typeface属性:
文章图片
Paste_Image.png 运行效果如下
文章图片
Paste_Image.png 这个图标的大小完全是通过textSize属性来决定的,是不是很神奇!
巧用Iconfont 的svg资源 其实阿里的iconfont给我们提供了我们想要的各种格式资源:
文章图片
Paste_Image.png 这里的svg文件我们是完全可以拿过来用的!(审查页面元素)
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- 继续努力,自主学习家庭Day135(20181015)
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)