Font-Awesome 是为Bootstrap设计的一个图标集合字体,里面包含了300多个常用图标。使用Font-Awesome还具有如下优点:

1. 减少了图标的绘制工作

2. 可以设置图标的颜色和大小

3. 减少了图标的大小并且可以减少apk的大小,只需要一个图标字体文件即可,不需要各种尺寸的图标文件了,比如 HDPI、XHDPI等各种尺寸的图标。

Font-Awesome的使用方式

到Font-Awesome主页下载Font-Awesome字体(fontawesome-webfont.ttf)文件并放到项目的assets目录下,找到需要用的图标对应的字符串(font-awsome-for-android 包含了一份图标和字符串的对应文件,最新的对应关系在下载的Font-Awesome字体中的css目录中的font-awesome.css文件中查找),在TextView中设置需要使用的图标文字,然后设置TextView的字体为自定义的Font-Awesome字体。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//在XML中使用
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_credit_card"
    android:textSize="50sp"
    android:textColor="#F59012"
    android:textAppearance="?android:attr/textAppearanceLarge" />
//或者在代码中使用:
 
myTextView.setText(getString(R.string.icon_credit_card));
 
 
 
//然后设置自定义字体:
 
    TextView txt = (TextView) findViewById(R.id.textView1); 
    Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    txt.setTypeface(font);

另外如果需要在使用Drawable的地方使用Font-Awesome图标,则可以自定义一个Drawable,然后在代码中使用该Drawable,详细使用方式请参考fonticon这个示例项目:https://github.com/shamanland/fonticon

另外除了Font-Awesome图标字体以为,还有其他的图标字体,例如 http://icomoon.io/

在android开发中,往往会有大量的小图标,可是android界面与html是不同的,比如html中,可以将大量的小图标制作成雪碧图,这样会大量的减少http的请求次数,对于性能也是有很大的提升,而在android中,一般对于na本身tive app的小图标一般是用来做显示用的,都会内嵌到 应用 ,两者也没有什么可比性,不过如果android应用中有大量的小图标,无形中就增加了apk的文件大小,这个时候就到了font awesome出场了。

什么是font awesome

font awesome是一个专为Bootstrap设计的字体文件,我们可以通过向显示字体一样方便的显示我们想要显示的图标文件。对于android来讲,可以使用字体来代替部分需要显示的小图片,并且在这些字体中的图片都是矢量图,是可以放大和缩小的,这就意味着每个图标都能在所有大小的屏幕上完美呈现。好了,废话不多说,直接进入正题吧。

在android上使用font awesome

1.下载font awesome

下载地址

2.解压下载的压缩包

将fonts目录下的fontawesome-webfont.ttf文件拷贝到asset文件夹下 

3.编写string.xml

首先需要编写string.xml文件,需要去http://fortawesome.github.io/Font-Awesome/cheatsheet/连接下寻找自己想要的字体图标对应的字符串。

<string name="heard">&#xf004;</string>
<string name="fa_google_plus">&#xf0d5;</string>
<string name="fa_save">&#xf0c7;</string>
<string name="fa_thumbs_o_up">&#xf087;</string>
<string name="fa_toggle_on">&#xf205;</string>

这里每一个string中的值就是需要显示的图标对应的值,name的值可以随便给一个,不过一般都是一个有意义的名称。

4.编写布局

在textview中使用该字符串,就可以显示其对应的图标了,这里就替换了之前使用imageview来显示小图标了。方便了很多。

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:padding="50dp"
tools:context=".MainActivity" > <TextView
android:id="@+id/test_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/heard"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#Ff9834"
android:textSize="30sp" />
<TextView
android:id="@+id/fa_google_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fa_google_plus"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#87619a"
android:textSize="50sp" />
<TextView
android:id="@+id/fa_thumbs_o_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fa_thumbs_o_up"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#976523"
android:textSize="60sp" />
<TextView
android:id="@+id/fa_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fa_save"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#954278"
android:textSize="40sp" />
<TextView
android:id="@+id/fa_toggle_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fa_toggle_on"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#273896"
android:textSize="50sp" /> </LinearLayout>

可以发现,这里我们可以自定义该图标的颜色和大小,这样在不同的屏幕适配也是极好的,很方便。

5.代码中引用

首先找到asset下对应的.ttf文件

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

然后只需要为每一个textView setTypeface(font)即可。

((TextView)findViewById(R.id.fa_google_plus)).setTypeface(font);

显示效果如下: 

虽然font awesome有诸多优点,但是还是不得不提其图标数量还是那么的有限,我们很难找到从其身上所有的需要的图标。全当一个了解吧,这也是其还没有在本地应用流行起来的原因吧,不过对于web app这是一个很好的创新,尤其是使用bootstrap编写出来的web页面,同样可以在手机的浏览器上访问。这种自适应的布局,真正达到了pc和手机同时可以访问的目的。

源码下载

Font-Awesome for android的更多相关文章

  1. Android Studio 个人常用设置

    1.主题 Darcula主题真的看起来舒服很多呢: 2.常用快捷键 "Toggle Case" "Quick Documentation" "Refo ...

  2. android中的TextView控件

    我以前是搞ssh开发的,现在在搞android开发,所以简单学习了一下,对于自己所了解的做一个记录,也算是一个笔记吧,如果有什么不对的,希望大家给予一定的指导.  一.TextView的基本使用 Te ...

  3. Android性能调优

    本文主要分享自己在appstore项目中的性能调优点,包括同步改异步.缓存.Layout优化.数据库优化.算法优化.延迟执行等.一.性能瓶颈点整个页面主要由6个Page的ViewPager,每个Pag ...

  4. 如何使用好android的可访问性服务(Accessibility Services)

    原文:http://android.eoe.cn/topic/android_sdk * 主题* Manifest声明和权限 可访问性服务声明 可访问性服务配置 AccessibilityServic ...

  5. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  7. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. Color About——First

    最近在Android开发学习中遇到TextView背景色以及文字颜色着色问题,在此做个记录. 首先对于颜色的选择,我推荐W3C School,上面有对网页颜色的详尽说明以及实例,还提供了对于,同一种颜 ...

  9. 两种不同的重置样式方法(normalize.css)

    重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器 ...

  10. Java 最常用类(前1000名) 来自GitHub 3000个项目

    这篇文章主要介绍了最常用的1000个Java类(附代码示例),需要的朋友可以参考下 分析Github 3000个开源项目,粗略统计如下.括号内的数字是使用频率 0-3000. 下面的列表显示不全,完整 ...

随机推荐

  1. 【转】Apache Options Indexes FollowSymLinks详解

    禁止显示Apache目录列表-Indexes FollowSymLinks如何修改目录的配置以禁止显示 Apache 目录列表.缺省情况下如果你在浏览器输入地址: http://localhost:8 ...

  2. python str()与repr()

    相同点: 将任意值转为字符串 不同点: str()致力于生成一个对象的可读性好的字符串表示,它的返回结果通常无法用于eval()求值,但很适合用于print语句输出 repr()出来的值是给pytho ...

  3. redis操作

    测试环境redis操作 cd /export/servers/redis-2.8.9/src/./redis-cli -n 0 keys keys(pattern):返回满足给定pattern的所有k ...

  4. Android 程式开发:(十三)特殊碎片 —— 13.2 DialogFragment

    Android 程式开发:(十三)特殊碎片 —— 13.2 DialogFragment 原文地址 我们也可以创建另外一种碎片——DialogFragment.顾名思义,DialogFragment就 ...

  5. synergy帮组提升办公效率

    这个synergy确实很不错哦,当你在办公室拥有两台或者多台电脑的时候,放在面前多台显示器,多个鼠标,多个键盘,但是你的桌面上,是不是多出了些你不需要看到的键盘或者鼠标?至少我是这样子的,我希望多个显 ...

  6. Hibernate延迟加载机制详解

    摘自 http://blog.chinaunix.net/uid-20577907-id-3129234.html 1 延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是 ...

  7. Nexus手动更新索引

    如果有耐心的话,完全可以通过在线更新索引的方式来做,但所消耗的时间较长,下面介绍一种简单.可行的方式来手动更新索引文件. 访问http://repo.maven.apache.org/maven2/. ...

  8. win8以管理员身份安装软件

    win8以管理员身份安装软件 msiexec /package

  9. Installing IPython using pip on CentOS

    1. First to install pip # wget https://bootstrap.pypa.io/get-pip.py # python get-pip.py 2. Install i ...

  10. Linux下SSH的Log文件路径

    Redhat or Fedora Core: /var/log/secure # Mandrake, FreeBSD or OpenBSD: /var/log/auth.log # SuSE: /va ...