android - 如何在原生 Android 应用程序上使用“Font Awesome”中的图标和符号

Question

我正在尝试在我的应用程序上使用Font Awesome，我能够使用集成字体Typeface.createFromAsset()，但我也想使用此字体提供的图标，但到目前为止我还不能这样做。

这种特殊字体包含 Unicode 专用区域 (PUA) 内的图标，用于媒体播放器控件、文件系统访问、箭头等。

有没有人在Android上使用过包含图标和符号的字体，这可能吗？

score 310 · Accepted Answer

在我的 android 应用程序中，Font Awesome 似乎对我来说工作正常。我做了以下事情：

复制fontawesome-webfont.ttf到我的资产文件夹
使用此页面找到我想要的图标的字符实体：http: //fortawesome.github.io/Font-Awesome/cheatsheet/
在 strings.xml 中为每个图标创建了一个条目。例如心脏：
```
<string name="icon_heart">&#xf004;</string>
```

在我的 xml 布局视图中引用了所述条目：

 <Button
     android:id="@+id/like"
     style="?android:attr/buttonStyleSmall"
     ...
     android:text="@string/icon_heart" />

在我的 onCreate 方法中加载字体并将其设置为适当的视图：

Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
...
Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

score 29 · Accepted Answer

尝试 IcoMoon：http: //icomoon.io

选择你想要的图标
为每个图标分配字符
下载字体

比如说，您选择了播放图标，为其分配了字母“P”，然后将文件下载icomoon.ttf到您的资产文件夹中。这是您显示图标的方式：

xml:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="48sp"
  android:text="P" />

爪哇：

Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
textView.setTypeface(typeface);

我发表了关于制作漂亮的 Android 应用程序的演讲，其中包括对使用图标字体的说明，以及添加渐变以使图标更漂亮： http ://www.sqisland.com/talks/beautiful-android

图标字体说明从幻灯片 34 开始： http ://www.sqisland.com/talks/beautiful-android/#34

score 10 · Accepted Answer

也许为时已晚，但我有同样的需求，所以我已经发布了这个https://github.com/liltof/font-awsome-for-android 这是一个 android 就绪的 xml 版本的字体真棒可用就像 Keith Corwin 说

希望它会帮助别人。

score 9 · Accepted Answer

如上所述是一个很好的例子，效果很好：

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

Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

但！> 如果您从 xml 设置按钮内的字符串，这将起作用：

<string name="icon_heart">&#xf004;</string>
button.setText(getString(R.string.icon_heart));

如果您需要动态添加它可以使用这个：

String iconHeart = "&#xf004;";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

score 4 · Accepted Answer

为此目的设计了一个小而有用的库：

dependencies {
    compile 'com.shamanland:fonticon:0.1.9'
}

在Google Play上获取演示。

在此处输入图像描述

您可以在布局中轻松添加基于字体的图标：

<com.shamanland.fonticon.FontIconView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ic_android"
    android:textSize="@dimen/icon_size"
    android:textColor="@color/icon_color"
    />

您可以Drawable从 xml 膨胀字体图标：

<?xml version="1.0" encoding="utf-8"?>
<font-icon
    xmlns:android="http://schemas.android.com/apk/res-auto"
    android:text="@string/ic_android"
    android:textSize="@dimen/big_icon_size"
    android:textColor="@color/green_170"
    />

Java代码：

Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);

链接：

score 4 · Accepted Answer

如果您想要编程 setText 而不向 string.xml 添加字符串

在此处查看其十六进制代码：

http://fortawesome.github.io/Font-Awesome/cheatsheet/

替换  到 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));

score 2 · Accepted Answer

我用于 Font Awesome 的库之一是：

https://github.com/Bearded-Hen/Android-Bootstrap

具体来说，

https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text

文档很容易理解。

首先，在 build.gradle 中添加所需的依赖项：

dependencies {
    compile 'com.beardedhen:androidbootstrap:1.2.3'
}

其次，您可以在 XML 中添加它：

<com.beardedhen.androidbootstrap.FontAwesomeText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontawesometext:fa_icon="fa-github"
    android:layout_margin="10dp" 
    android:textSize="32sp"
/>

但如果您想使用上面的代码示例，请确保将其添加到您的根布局中：

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

score 2 · Accepted Answer

我在 C# (Xamarin) 中创建了这个帮助程序类，以编程方式设置文本属性。它对我来说效果很好：

internal static class FontAwesomeManager
{
    private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf");

    private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string>
    {
        {FontAwesomeIcon.Bars, "\uf0c9"},
        {FontAwesomeIcon.Calendar, "\uf073"},
        {FontAwesomeIcon.Child, "\uf1ae"},
        {FontAwesomeIcon.Cog, "\uf013"},
        {FontAwesomeIcon.Eye, "\uf06e"},
        {FontAwesomeIcon.Filter, "\uf0b0"},
        {FontAwesomeIcon.Link, "\uf0c1"},
        {FontAwesomeIcon.ListOrderedList, "\uf0cb"},
        {FontAwesomeIcon.PencilSquareOutline, "\uf044"},
        {FontAwesomeIcon.Picture, "\uf03e"},
        {FontAwesomeIcon.PlayCircleOutline, "\uf01d"},
        {FontAwesomeIcon.SignOut, "\uf08b"},
        {FontAwesomeIcon.Sliders, "\uf1de"}
    };

    public static void Awesomify(this TextView view, FontAwesomeIcon icon)
    {
        var iconString = IconMap[icon];

        view.Text = iconString;
        view.SetTypeface(AwesomeFont, TypefaceStyle.Normal);
    }
}

enum FontAwesomeIcon
{
    Bars,
    Calendar,
    Child,
    Cog,
    Eye,
    Filter,
    Link,
    ListOrderedList,
    PencilSquareOutline,
    Picture,
    PlayCircleOutline,
    SignOut,
    Sliders
}

我认为应该很容易转换为 Java。希望它可以帮助某人！

score 1 · Accepted Answer

FontView 库允许您在应用程序中使用普通/unicode 字体字符作为图标/图形。它可以通过资产或网络位置加载字体。

这个库的好处是：

1 - it takes care of remote resources for you
2 - scales the font size in dynamically sized views
3 - allows the font to easily be styled.

https://github.com/shellum/fontView

例子：

Layout:

<com.finalhack.fontview.FontView
        android:id="@+id/someActionIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

Java:

fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);

score 1 · Accepted Answer

还有另一种不错的解决方案，您可以直接在布局 xml 文件中使用，不需要使用setTypeface.

这是 Joan Zapata 的Iconify。您可以在此处阅读Iconify v2的新增功能。它包括 9 个不同的字体库，您可以通过将依赖项添加到build.gradle文件来简单地使用它们。

在布局 xml 文件中，可以在这些小部件之间进行选择：

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton

score 1 · Accepted Answer

最初创建asset文件夹并复制fontawesome图标（.ttf）如何创建asset文件夹？

app-->右键-->新建-->文件夹-->资产文件夹

下一步下载如何下载.ttf 文件？单击此处->下载解压后单击下载按钮并打开网络字体。最后选择真正的文本样式（ttf）粘贴资产文件夹。

如何在android中设计xml和java文件？

app-->res-->values string.xml

resources
    string name="calander_font" >&#xf073; <string
resources

一个字体的这个例子更多 Unicode点击这里

Activity_main.xml

 <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/calander_view"/>

MainActivity.java

calander_tv = (TextView)findViewById(R.id.calander_view);

Typeface typeface = Typeface.createFromAsset(getAssets(),"/fonts/fa-solid-900.ttf");
calander_tv.setTypeface(typeface);
calander_tv.setText(R.string.calander_font);

输出：

输出图像

score 0 · Accepted Answer

我参加聚会有点晚了，但我写了一个自定义视图，让你这样做，默认情况下它设置为 entypo，但你可以修改它以使用任何图标字体：在这里查看：github.com/MarsVard/IconView

// 编辑库是旧的，不再支持...这里是新的https://github.com/MarsVard/IonIconView

score 0 · Accepted Answer

如果你只需要几个字体很棒的图标，你也可以使用http://fa2png.io来生成普通的像素图像。但是，如果您定期添加新图标/按钮，我建议您使用 .ttf 版本，因为它更灵活。

score 0 · Accepted Answer

如果有人想知道如何以编程方式添加它，你必须这样做。

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part

score 0 · Accepted Answer

因为所有答案都很好，但我不想使用库，每个解决方案都只有一行 java 代码，让我Activities非常Fragments混乱。所以我把这个TextView类改写如下：

public class FontAwesomeTextView extends TextView {
private static final String TAG = "TextViewFontAwesome";
public FontAwesomeTextView(Context context) {
    super(context);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void setCustomFont(Context ctx, AttributeSet attrs) {
    TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus);
    String customFont = a.getString(R.styleable.TextViewPlus_customFont);
    setCustomFont(ctx, customFont);
    a.recycle();
}

private void init() {
    if (!isInEditMode()) {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf");
        setTypeface(tf);
    }
}

public boolean setCustomFont(Context ctx, String asset) {
    Typeface typeface = null;
    try {
        typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
    } catch (Exception e) {
        Log.e(TAG, "Unable to load typeface: "+e.getMessage());
        return false;
    }

    setTypeface(typeface);
    return true;
}
}

您应该做的是将字体ttf文件复制到assets文件夹中。并使用此备忘单查找每个图标字符串。

希望这可以帮助。

android - 如何在原生 Android 应用程序上使用“Font Awesome”中的图标和符号

15 回答 15

Related

Reference