所有232 展开类目

如何在移动设备上应用iconfont ƕ

2013/12/26
嘘... 嘘...

随着IOS7普及,扁平化设计在移动设备的应用越来越多,iconfont在移动设备上应用的话题也越来越受前端工程师关注,下面是阿里妈妈MUX团队在移动平台应用的一些经验教程;

 阅读全文

iconfont的优点

iconfont在web上的应用已经很广泛,如淘宝、一淘、sina、豆瓣等大网站都已经在自己的网站上应用了iconfont技术;它能有效的解决分辨率的问题,并且在应用的时候非常便捷,节省前端、设计很多重复改图、调色的工作。在移动设备上众多DPI设备更是一个困扰问题设计师、前端的大问题;一个app在适配高低版本iphone手机及分辨率众多的安卓设备的时候设计师需要设计很多版本的图片,而iconfont这种矢量图形就能很好解决这种重复设计的工作;

 

在Android中使用iconfont图标

以下教程的icon均来自www.iconfont.cn 

在Android设备中使用iconfont图标实例Demo

应用步骤

step1:从iconfont平台选择要使用到的图标,并下载至本地;复制字体文件到项目 assets 目录;

step2:打开从iconfont平台下载下来的文件,并在目录中打开demo.html,找到图标相对应的 HTML 实体字符码;

step3:打开 res/values/strings.xml,添加 string 值;

<string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>

 

step4:打开 activity_main.xml,添加 string 值到 TextView: 

 <TextView

    android:id="@+id/like"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icons" />

 

step5:为 TextView 指定文字: 

import android.graphics.Typeface; 
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
    TextView textview = (TextView)findViewById(R.id.like);
    textview.setTypeface(iconfont);
}
 
 
图例
 
 

在IOS中使用iconfont图标

在IOS中使用iconfont图标实例Demo

应用步骤

step1:将您从IconFont平台下载的字体文件(.ttf)添加到工程中;

打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“

step2:使用IconFont字体:

UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
label.font = iconfont;
label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
[self.view addSubview: label];
 
 
这里有两个地方注意下:
 
1、创建 UIFont 使用的是字体名,而不是文件名;
2、文本值为 8 位的 Unicode 字符,我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码,比如:
"店" 对应的 HTML 实体 Unicode 码为:0x3439    转换后为:\U00003439
就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符
 
更多参数设置可以参考:https://coderwall.com/p/wrb3pw
5 条评论   |   账号登录: è域账号     Ƹ淘宝账号     ǔ新浪微博
家有闲宝
家有闲宝 发表于: 2015-11-20 05:37:43
在swift 1.2 或者 2.x中 \U00003439 报错 无法使用
小焚楠
小焚楠 发表于: 2015-08-14 16:25:02
window xp 中 iconfont显示不全
青年先疯队大队长
青年先疯队大队长 发表于: 2015-03-28 16:16:17
图片挺全的,要是像 iconmoon 来个离线端插件或者客户端 那就完美了
www.317t.com
www.317t.com 发表于: 2014-07-22 19:15:22
淘宝装修教程:http://www.317t.com/
神仙姐姐救我
神仙姐姐救我 发表于: 2014-06-04 16:19:19
不错 wordpress?
loading...