如何在本地 Android 应用程序中使用“ Font Awesome”中的图标和符号

我正在尝试在我的应用程序中使用 超赞字体，我能够使用 Typeface.createFromAsset()集成字体，但是我也想使用这种字体提供的图标，但是到目前为止我还没有能够做到这一点。

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

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

120009 次浏览
小开

试试 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" />

Java:

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

小开
最佳答案

在我的 Android 应用程序中，Font Awesome 似乎运行得很好。我做了以下操作:

  1. 将 fontawesome-webfont.ttf复制到我的资产文件夹中
  2. 找到了我想要的图标的字符实体，使用这个页面: http://fortawesome.github.io/Font-Awesome/cheatsheet/

  3. 在 strings.xml 中为每个图标创建一个条目:

    <string name="icon_heart">&#xf004;</string>

  4. Referenced said entry in the view of my xml layout:

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

  5. Loaded the font in my onCreate method and set it for the appropriate Views:

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

我有点晚了，但我写了一个自定义视图，让你这样做，默认设置为 entypo，但你可以修改它使用任何图标字体: 检查这里: github.com/marsvard/iconview

// 编辑库是旧的，不再支持..。 这里有一个新的 https://github.com/marsvard/ioniconview

小开

也许为时已晚，但我也有同样的需求，所以我发表了这篇 https://github.com/liltof/font-awsome-for-android 就像 Keith Corwin 说的那样，这是一个非常好用的 android xml 版本的字体

希望能帮到别人。

小开

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);
小开

如果您只需要一些字体可怕的图标，您也可以使用 http://fa2png.io生成普通像素图像。但是，如果您经常添加新的图标/按钮，我建议您使用。因为它更灵活的 ttf 版本。

小开

有一种小型而有用的 为此目的而设计的图书馆:

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

播放 Google Play的演示。

enter image description here

你可以很容易地在你的布局中添加基于字体的图标:

<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"
/>

您可以从 xml 中将 font-icon 膨胀为 Drawable:

<?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);

相关网址:

小开

我用于 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"
小开

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

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

如果您希望程序化 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 }));
小开

以上是一个很好的例子，效果很好:

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 + "");
小开

我用 C # (Xamarin)创建了这个 helper 类，以编程方式设置 text 属性。这对我来说很有效:

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 应该很容易，希望对某些人有所帮助！

小开

还有另一个很好的解决方案，可以直接在布局 xml 文件中使用，而不需要使用 setTypeface。

这是 Joan Zapata 的 象征性的。你可以读 给你什么是新的在 Iconify v2。它包括9种不同的字体库，您可以简单地通过向 建造，分级文件添加依赖项来使用它们。

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

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

因为所有的答案都是伟大的，但我不想使用一个库和每个解决方案只有一行 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文件夹。并使用 这张小抄查找每个图标字符串。

希望这能帮上忙。

小开

最初创建资产文件夹并复制 fontawome 图标(. ttf) 如何创建资产文件夹？

应用程序—— > 右击—— > 新—— > 文件夹—— > 资产文件夹

下一步下载如何下载. ttf 文件？ 点击这里-> ，点击下载按钮后下载提取和打开网页字体。最后选择真正的文本样式(ttf)粘贴资产文件夹。

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

应用程序—— > res —— > 值 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);

产出:

输出图像


提交答案