如何在 Android 中使用 Font Awesome 字体图标

· 大约 400 个字 · 预计 2 分钟 读完
Android · 开源项目
Android · 开源项目 · FontAwesome · Android图标 · 字体图标

Font Awesome 是非常受欢迎的图标工具，许多网站都在使用。它有免费和专业的图标集，但你可以在免费的图标集中找到大多数图标。每个图标都将由 unicode ()表示。我们使用这个 unicode 在 TextView 中显示图标。因为它是一个普通的 TextView，所有的文本样式属性(颜色，大小，划片等)可以应用。

例如：如果你想显示安卓机器人图标,您可以使用  unicode 作为 TextView 值。

详情可参考此项目：https://github.com/ravi8x/Android-Font-Awesome

Font Awesome 的 Android Library

为了使用 Font Awesome 图标集合，您必须将 Font Awesome 字体文件直接添加到您的 assets 文件夹中，并在 TextView 上应用合适的 fontFace，这一步很简单。但是我们可能还希望图标能显示在其他小部件中，比如 按钮、菜单、底部导航 和 导航抽屉等。在非 TextView 中显示图标需要一些额外工作。因此，我编写了一个库，结合了所有必要的方法来在多个小部件中呈现图标。

首先，在构建 build.gradle 中包含 fontawesome 然后同步项目：

1
2
3
4

dependencies {
    // font awesome
    implementation 'info.androidhive:fontawesome:0.0.5'
}

如何使用它

TextView 中显示 Font Awesome 图标

显示字体图标的最简单方法是，通过将适当的图标名称设置为文本值来使用 FontTextView。这个小部件是从 AppCompatTextView 扩展而来的，所以所有的文本视图属性都适用于这个小部件。

1
2
3
4
5
6
7

<info.androidhive.fontawesome.FontTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/fa_calendar_check_solid"
    android:textColor="@color/icon_color"
    android:textSize="@dimen/icon_size"
    app:solid_icon="true" />

solid_icon ：要显示实体图标，请将此值设置为 true。 brand_icon ：要显示品牌图标，请将此值设置为 true。

使用 FontDrawable

在 xml 布局中使用图标很容易，但是如果您想将图标用于按钮或菜单等其他小部件，则可以使用 FontDrawable 元素来应用图标。例如，如果您想要使用 Font Awesome 图标来浮动动作按钮，您可以使用如下所示的FontDrawable。

1
2
3
4
5
6
7
8

FloatingActionButton fab = findViewById(R.id.fab);
 
// using paper plane icon for FAB
FontDrawable drawable = new FontDrawable(this, R.string.fa_paper_plane_solid, true, false);
 
// white color to icon
drawable.setTextColor(ContextCompat.getColor(this, android.R.color.white));
fab.setImageDrawable(drawable);

在 Menu 中使用（底部导航、导航抽屉等）

你也可以使用小部件中的字体图标，这些小部件使用菜单文件来渲染工具栏图标、底部导航、导航抽屉等项，为了渲染菜单中的图标，你可以使用 FontDrawable 来设置图标，但是它需要一些 java 代码的技巧。下面的例子显示了在“导航抽屉”菜单中重新设置字体图标。完整的例子可以在 这里 找到。

 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        intDrawerLayout();
    }
 
    /**
     * Changing navigation drawer icons
     * This involves looping through menu items and applying icons
     */
    private void intDrawerLayout() {
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
 
        ImageView iconHeader = navigationView.getHeaderView(0).findViewById(R.id.nav_header_icon);
        FontDrawable drawable = new FontDrawable(this, R.string.fa_font_awesome, false, true);
        drawable.setTextColor(ContextCompat.getColor(this, android.R.color.white));
        drawable.setTextSize(50);
        iconHeader.setImageDrawable(drawable);
 
        int[] icons = {
                R.string.fa_home_solid, R.string.fa_calendar_alt_solid, R.string.fa_user_solid,
                R.string.fa_heart_solid, R.string.fa_comment_solid, R.string.fa_dollar_sign_solid, R.string.fa_gift_solid
        };
        renderMenuIcons(navigationView.getMenu(), icons, true, false);
 
        int[] iconsSubmenu = {R.string.fa_cog_solid, R.string.fa_sign_out_alt_solid};
 
        renderMenuIcons(navigationView.getMenu().getItem(7).getSubMenu(), iconsSubmenu, true, false);
    }
 
    /**
     * Looping through menu icons are applying font drawable
     */
    private void renderMenuIcons(Menu menu, int[] icons, boolean isSolid, boolean isBrand) {
        for (int i = 0; i < menu.size(); i++) {
            MenuItem menuItem = menu.getItem(i);
            if (!menuItem.hasSubMenu()) {
                FontDrawable drawable = new FontDrawable(this, icons[i], isSolid, isBrand);
                drawable.setTextColor(ContextCompat.getColor(this, R.color.icon_nav_drawer));
                drawable.setTextSize(22);
                menu.getItem(i).setIcon(drawable);
            }
        }
    }
}