GitHub之Font-Awesome使用

发表于 | 分类于 | 阅读次数：

GitHub地址：https://github.com/FortAwesome/Font-Awesome，一直知道这个项目，但是却不知道如何使用它，现在有个博客介绍，感谢博主。我这里做个记录。

导入字体文件

在安卓项目中，导航到 app > src > main。 main 目录应该包含了一个叫 assets的文件夹。在assets 文件夹中创建另一个fonts文件夹，并把fontawesome-webfont.ttf 添加到这个文件夹。
fonts 文件夹并不是必须的。你可以直接把FontAwesome 的字体文件放在 assets 目录，但是把相同类型的文件放在专门的目录里面比较方便。只要FontAwesome 字体在assets 或者子目录之下就行。

创建一个帮助类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class FontManager {
    public static final String ROOT = "",
            FONTAWESOME = ROOT + "fontawesome-webfont.ttf";
    public static Typeface getTypeface(Context context, String font) {
        return Typeface.createFromAsset(context.getAssets(), font);
    }
  /**
     * 图标一般都是包含在一个ViewGroup，
     * 比如一个RelativeLayout或者LinearLayout中。
     * 我们可以写一个方法，爬遍指定xml parent 并且递归的覆盖每个TextView的字体。
     *
     */
    public static void markAsIconContainer(View v, Typeface typeface) {
        if (v instanceof ViewGroup) {
            ViewGroup vg = (ViewGroup) v;
            for (int i = 0; i < vg.getChildCount(); i++) {
                View child = vg.getChildAt(i);
                markAsIconContainer(child,typeface);
            }
        } else if (v instanceof TextView) {
            ((TextView) v).setTypeface(typeface);
        }
    }
}

使用图标

访问 FontAwesome的GitHub页面 并浏览所给的图标。选择三个你喜欢的。

进入 values 文件夹并创建一个新的文件：icons.xml。这个文件将被作为字典使用，它将把Unicode 字符和相应的图标用可读的名字匹配起来。这意味着我们需要为每个图标创建一个入口。

1
2
3
4
5
<resources>
    <string name="fa_icon_areachart">&#xf1fe;</string>
    <string name="fa_icon_piechart">&#xf200;</string>
    <string name="fa_icon_linechart">&#xf201;</string>
</resources>

onCreate方法

1
2
3
4
5
6
7
@Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_font_awesome);
       Typeface iconFont = FontManager.getTypeface(FontAwesomeActivity.this, FontManager.FONTAWESOME);
       FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);
   }

对应的activity_font_awesome.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/icons_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/fa_icon_areachart" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/fa_icon_piechart"
        android:textColor="#9b59b6"
        android:textSize="45sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/fa_icon_linechart" />
</LinearLayout>



联系作者

我的微信公众号：吴小龙同学，欢迎关注交流，公号回复关键字「1024」有惊喜哦。