Android 在APP中使用 Font Awesome 图标_.fa-headphones

1.什么是 Font Awesome 图标？

如果你做过网页开发，对Font Awesome这个css库应该比较熟悉，就像它网站描述的“一套绝佳的图标字体库和CSS框架”

官网地址：Font Awesome 打开比较慢，我比较习惯用Font Awesome，一套绝佳的图标字体库和CSS框架这个网站。

在网页中使用<i class="fa fa-address-book">就可以调用图图标了。

2.在Android中可以使用吗？

当然可以，不然就不会有这篇文章了。

3.在Android中如何使用Font Awesome库？

第1步：下载css字体库文件。

由于官方地址下载很慢，我网站上挂了一个http://qingshanboke.com/uploadfiles/file/fontawesome-webfont.rar，放到项目main/assets文件夹下，如果没有这个文件夹，新建一个。像这样：

第2步：在需要使用图标的Activity，引入字体，并将字体设置到控件。

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
TextView textView=(TextView)findViewById(R.id.textView);
textView.setTypeface(font);

第3步：修改布局文件

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_marginRight="3dp"
            android:gravity="center"
            android:text="@string/users"
            android:textColor="#888888" />

注意：android:text="@string/users" 里面的text属性，指向资源文件strings.xml里的users键。

第4步：修改资源文件 main/res/values/strings.xml

<resources>
    <string name="users">&#xf0c0;</string>
</resources>

注意：里面的&#xf0c0;即是对应的图标字体。

第5步：如何找到图标对应的代码值呢？

在font-awesome.css中可以找到图标对应的值。

https://fontawesome.dashgame.com/assets/font-awesome/css/font-awesome.css

当然，你直接访问，会得到压缩后的css，看上去很乱。然鹅，你找个工具格式化一下，就很清晰了。大概是这样：

.fa-headphones:before {
	content: "\f025"
}
 
.fa-volume-off:before {
	content: "\f026"
}
 
.fa-volume-down:before {
	content: "\f027"
}
 
.fa-volume-up:before {
	content: "\f028"
}

看到了没，以.fa-headphones为例，对应的图标就是：

对应的键就是：\f025，对应的strings.xml配置就是：<string name="headphones"></string>，当然name你可以随便取。

可参考 Font Awesome 4.4.0的所有图标参考_jQuery之家-自由分享jQuery、html5、css3的插件库

4.扩展：如果所有Activity都要用到字体库，则可以增加一个Application，全局使用。大概像这样：

import android.app.Application;
import android.graphics.Typeface;
 
 
public class AppContext extends Application {
    public static Typeface _font;
 
    @Override
    public void onCreate() {
        super.onCreate();
        _font = Typeface.createFromAsset(getApplicationContext().getAssets(), "fontawesome-webfont.ttf");
    }
}

需要使用的控件只需要：

TextView textView=(TextView)findViewById(R.id.textView);
textView.setTypeface(AppContext._font);

当然，增加的Application不要忘了在AndroidManifest.xml中注册。

最后配一张效果图吧