Как использовать значки и символы из «Font Awesome» в приложении Native Android

153

Я пытаюсь использовать Font Awesome в своем приложении, я смог интегрировать шрифт с помощью Typeface.createFromAsset(), но я также хочу использовать значки, предоставленные этим шрифтом, но до сих пор я не смог этого сделать.

Этот конкретный шрифт содержит значки внутри области частного использования Unicode (PUA) для таких вещей, как элементы управления медиаплеера, доступ к файловой системе, стрелки и т. Д.

Кто-нибудь использовал шрифты, которые содержат значки и символы на Android, это вообще возможно?

Джулиан Суарес
источник
2
Я обновил ссылку
Джулиан Суарес
23
Я не согласен, что это не по теме для переполнения стека. Мне кажется, что он соответствует этим ( stackoverflow.com/help/on-topic ) рекомендациям, так как он: о конкретной задаче программирования (как применить определенный значок на основе шрифта для конкретной мобильной платформы), и это практическая, ответственная проблема (см. мой ответ ниже, который, я думаю, иллюстрирует это).
Кит Корвин
Посмотрите этот репозиторий для реализации великолепного шрифта в android github.com/bperin/FontAwesomeAndroid
Брайан,
проверьте эту библиотеку: blog.shamanland.com/p/android-fonticon-library.html , она доступна в Maven Central. см. демонстрационное приложение: play.google.com/store/apps/…
Алексей К.

Ответы:

307

Мне кажется, что Font Awesome отлично работает в моем приложении для Android. Я сделал следующее:

  1. Скопировано fontawesome-webfont.ttfв мою папку с активами
  2. Нашли нужные мне символы персонажей для значков, используя эту страницу: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Создана запись в strings.xml для каждого значка. Например, для сердца:

    <string name="icon_heart">&#xf004;</string>
  4. Ссылка на упомянутую запись в представлении моего XML-макета:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
    
  5. Загрузил шрифт в моем методе onCreate и установил его для соответствующих Views:

    Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
    ...
    Button button = (Button)findViewById( R.id.like );
    button.setTypeface(font);
    
Кит Корвин
источник
46
Отличная идея. Но остерегайтесь проблем с памятью при постоянном создании нового шрифта для каждой иконки. Вместо этого используйте что-то вроде Hashtableповторного использования шрифта вашего значка, как предложено здесь: code.google.com/p/android/issues/detail?id=9904#c7
saschoar
1
я делаю это следующим образом: stackoverflow.com/questions/2973270/…
Informatic0re
4
Я создал проект для этого: bitbucket.org/informatic0re/awesome-font-iconview
Informatic0re
1
У меня есть некоторые проблемы с моим кодом: если я объявлю строку strings.xmlкак, а <string name="faicon">&#xf001;</string>затем установить текст в моем коде, все будет в порядке. Но когда я пытаюсь mTextView.setText("&#xf004;");это показать только сырой текст. Кто-нибудь мог помочь? спасибо
vtproduction
2
Добавьте динамическую строку в textview, как этот text.setText (Html.fromHtml ("& # xf000;"));
rana_sadam
29

Попробуйте 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

chiuki
источник
10

Может быть, слишком поздно, но у меня была такая же потребность, поэтому я опубликовал этот https://github.com/liltof/font-awsome-for-android Это xml-версия шрифта для Android, готовая для использования, как и сказал Кейт Корвин

Надеюсь, это поможет другим.

liltof
источник
1
Добро пожаловать в ТАК. Я видел твой код не слишком длинный. Почему бы вам не опубликовать это в этом ответе? Ссылки могут зависать со временем.
Андре Сильва
Я использую этот отличный XML-файл в течение нескольких недель. Но теперь я понял, что он пропускает fa_times. Можете ли вы обновить его? Редактировать: о, это fa_remove. или icon_remove в вашем файле.
mobilGelistirici
Как добавить текст, а также значок в кнопку, используя удивительный шрифт? Как добавить DrawBable влево или вправо в кнопку.
Siddharth_Vyas
9

Как указано выше, это отличный пример и прекрасно работает:

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 + "");
user1540907
источник
лучший способ когда-либо! спасибо, я даю + голосую. Просто нажмите кнопку просмотра текста и замените String.valueOf на строку get
erfan
Наконец-то решение использовать шрифт потрясающе. Большое спасибо!
Clamorious
4

Если вы хотите программный setText без добавления строки в string.xml

посмотрите его шестнадцатеричный код здесь:

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

заменить & # xf066; до 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));
Харьянто
источник
4

Для этого есть небольшая и полезная библиотека :

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

Вы можете надуть font-icon как 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);

Ссылки:

Алексей К.
источник
действительно хорошая библиотека, спасибо. Надувные xml-определения немного затрудняют, я предпочитаю напрямую использовать FontIconView
hotzen
Я протестировал это в Lenovo с Android 4.2.2, и значки не отображаются, что может быть?
Олли Стревел
Попробуйте последнюю версию0.1.9
Алексей К.
2

Я сделал этот вспомогательный класс в C # (Xamarin), чтобы программно установить свойство 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. Надеюсь, это поможет кому-то!

Андрес Сепульведа
источник
2

Одна из библиотек, которые я использую для 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"
Абдул Рахман А Самад
источник
Я последовал этому, но получил ошибку: Ошибка: (54) Не найден идентификатор ресурса для атрибута 'fa_icon' в пакете 'xxx.yyy'
Хаджат
@Hajjat, чтобы использовать это, вам нужно использовать версию 1.2.3. Я просто обновил код, чтобы отразить это. Попытайся.
Абдул Рахман Самад
1

Библиотека 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);
Shellum
источник
Кеширует ли он объект Typeface в памяти? Существует известная возможность утечки памяти при обработке шрифтов на Android.
TheRealChx101
1

Есть еще одно приятное решение, которое вы можете использовать в своих XML-файлах макета напрямую и не требует его использования setTypeface.

Это Iconify Джоан Сапата . Вы можете прочитать здесь, что нового в Iconify v2 . Он включает в себя 9 различных библиотек шрифтов, которые вы можете просто использовать, добавив зависимости в файл build.gradle .

В XML-файлах макета можно выбрать один из следующих виджетов:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton
gus27
источник
1

Сначала создайте папку с активами и скопируйте значок fontawesome (.ttf). Как создать папку с активами?

приложение -> щелкните правой кнопкой мыши -> новая -> папка -> папка ресурса

Следующий шаг скачать, как скачать файл .ttf? нажмите здесь -> и нажмите кнопку загрузки после загрузки извлечения и откройте веб-шрифты. наконец, выберите истинный текстовый стиль (ttf) и вставьте папку с активами.

Как создать XML и Java-файл в Android?

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

Вывод:

Выходное изображение

Манодж Кумар Т
источник
0

Я немного опоздал на вечеринку, но я написал собственное представление, которое позволяет вам делать это, по умолчанию оно установлено на entypo, но вы можете изменить его для использования любого iconfont: проверьте это здесь: github.com/MarsVard/IconView

// редактировать библиотеку старая и больше не поддерживается ... новая здесь https://github.com/MarsVard/IonIconView

Марс
источник
Ваша библиотека не кэширует гарнитуру и вместо этого создает ее каждый раз при визуализации представления.
Фернандо Камарго
1
@FernandoCamargo Правильно, эта библиотека старая и должна быть обновлена ​​с улучшенным кэшированием ... вот новая библиотека с улучшенной производительностью github.com/MarsVard/IonIconView
Mars
0

Если вам нужно всего несколько шрифтов, вы также можете использовать http://fa2png.io для создания обычных пиксельных изображений. Но если вы будете регулярно добавлять новые значки / кнопки, я бы порекомендовал версию .ttf, так как она более гибкая.

j7nn7k
источник
0

Если кто-то задается вопросом, как добавить это программно, вам нужно сделать это таким образом.

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part
Башня Джимми
источник
0

Поскольку все ответы велики , но я не хочу использовать библиотеку и каждое решение только с одной строки кода 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папку. И использовать этот шпаргалку для поиска каждой строки значков.

надеюсь это поможет.

Поуя Данеш
источник