|
随着IOS7普及，扁平化设计在移动设备的应用越来越多，iconfont在移动设备上应用的话题也越来越受前端工程师关注，下面是阿里妈妈MUX团队在移动平台应用的一些经验教程；
iconfont的优点iconfont在web上的应用已经很广泛，如淘宝、一淘、sina、豆瓣等大网站都已经在自己的网站上应用了iconfont技术；它能有效的解决分辨率的问题，并且在应用的时候非常便捷，节省前端、设计很多重复改图、调色的工作。在移动设备上众多DPI设备更是一个困扰问题设计师、前端的大问题；一个app在适配高低版本iphone手机及分辨率众多的安卓设备的时候设计师需要设计很多版本的图片，而iconfont这种矢量图形就能很好解决这种重复设计的工作；
在Android中使用iconfont图标以下教程的icon均来自www. 在Android设备中使用iconfont图标实例Demo
应用步骤step1:从iconfont平台选择要使用到的图标，并下载至本地；复制字体文件到项目 assets 目录；
step2:打开从iconfont平台下载下来的文件，并在目录中打开demo.html，找到图标相对应的 HTML 实体字符码；
step3:打开 res/values/strings.xml，添加 string 值； <string name="icons">㘅 㖭 㖮 㖯</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:///p/wrb3pw |
|
|
