IT入门 > 图文教程 > HTML5+CSS3 >

IT入门 > 图文教程 > HTML5+CSS3 >

如何在移动设备上应用iconfont

  你会看到这个提示,那是因为你的系统无法识别某栏目的模型信息,或者你新建模型后,没为这个模型设计单独的模板。不同模型的文档浏览页的模板为:article_模型名字标识.htm 如“article_article.htm”,更多的信息你可以在频道模型管理的地方查看。
文件类型 内容:
模板调用标记:
.exe
语言 内容:
模板调用标记:
简体中文
软件类型 内容:
模板调用标记:
国产软件
授权方式 内容:
模板调用标记:
共享软件
操作系统 内容:
模板调用标记:
软件等级 内容:
模板调用标记:
3
官方网址 内容:
模板调用标记:
演示网址 内容:
模板调用标记:
软件大小课程时长 内容:
模板调用标记:
下载资料 内容:
模板调用标记:
详细介绍 内容:
模板调用标记:

如何在移动设备上应用iconfont

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

iconfont的优点

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

在Android中使用iconfont图标

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

如何在移动设备上应用iconfont

应用步骤

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

如何在移动设备上应用iconfont

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

如何在移动设备上应用iconfont

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);}  图例

如何在移动设备上应用iconfont

在IOS中使用iconfont图标

如何在移动设备上应用iconfont

应用步骤

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

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

如何在移动设备上应用iconfont

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 个字符

如何在移动设备上应用iconfont

 

原文:http://ued.co/2412

 


下载级别 内容:
模板调用标记:
0
需要金币 内容:
模板调用标记:
0
课程难度 内容:
模板调用标记:
0
(责任编辑:zengmumu)
    广告位API接口通信错误,查看德得广告获取帮助