使用iconfont学习笔记

一、自定义iconfont的使用

iconfont解读

使用iconfont代替传统的图标有什么好处,以及相关的用法,这里也直接推荐一篇博文给大家:
http://www.frontopen.com/1906.html

本文固定链接: http://www.frontopen.com/1906.html
转载请注明: 品味人生 2014年02月25日
前端开拓者 发表

这里主要介绍iconfont上的字体图标使用方法
相信很多猿友图标都是在这里找的: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文件我们是完全可以拿过来用的!(审查页面元素)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容