Cómo usar iconos y símbolos de "Font Awesome" en la aplicación nativa de Android


153

Estoy tratando de usar Font Awesome en mi aplicación, pude integrar la fuente usando Typeface.createFromAsset(), pero también quiero usar los íconos provistos por esta fuente, pero hasta ahora no he podido hacerlo.

Esta fuente en particular contiene iconos dentro del Área de uso privado (PUA) de Unicode, para cosas como controles del reproductor multimedia, acceso al sistema de archivos, flechas, etc.

¿Alguien ha usado fuentes que contienen iconos y símbolos en Android? ¿Es esto posible?



2
He actualizado el enlace
Julian Suarez

23
No estoy de acuerdo con que esto esté fuera de tema para Stack Overflow. Me parece que se ajusta a estas pautas ( stackoverflow.com/help/on-topic ), ya que trata sobre un problema de programación específico (cómo aplicar un conjunto de iconos basado en fuentes específico a una plataforma móvil específica), y es un problema práctico y responsable (vea mi respuesta a continuación, que creo que ilustra eso).
Keith Corwin

Echa un vistazo a este repositorio para implementar la fuente impresionante en Android github.com/bperin/FontAwesomeAndroid
Brian

consulte esta biblioteca: blog.shamanland.com/p/android-fonticon-library.html , está disponible en Maven Central. vea la aplicación de demostración: play.google.com/store/apps/…
Oleksii K.

Respuestas:


307

Font Awesome parece estar funcionando bien para mí en mi aplicación de Android. Hice lo siguiente:

  1. Copiado fontawesome-webfont.ttfen mi carpeta de assests
  2. Encontré las entidades de caracteres para los iconos que quería, usando esta página: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Creó una entrada en strings.xml para cada icono. Por ejemplo, para un corazón:

    <string name="icon_heart">&#xf004;</string>
  4. Se hizo referencia a dicha entrada en la vista de mi diseño xml:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
  5. Cargué la fuente en mi método onCreate y configúrelo para las Vistas apropiadas:

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

46
Gran idea. Pero tenga cuidado con los problemas de memoria al crear constantemente un nuevo tipo de letra para cada icono. En su lugar, use algo como Hashtablereutilizar el tipo de letra de su ícono, como se sugiere aquí: code.google.com/p/android/issues/detail?id=9904#c7
saschoar



1
Tengo algunos problemas con mi código: si declaro la cadena strings.xmlcomo, <string name="faicon">&#xf001;</string>entonces establezco texto en mi código, estará bien. Pero cuando lo intento mTextView.setText("&#xf004;");, solo se muestra el texto sin formato. ¿Alguien podría ayudar? thks
vtproduction

2
Agregue una cadena dinámica a la vista de texto como este text.setText (Html.fromHtml ("& # xf000;"));
rana_sadam

29

Prueba IcoMoon: http://icomoon.io

  • Elige los íconos que quieras
  • Asigna caracteres a cada ícono
  • Descargar la fuente

Digamos que seleccionó el icono de reproducción, le asignó la letra 'P' y descargó el archivo icomoon.ttfa su carpeta de activos. Así es como se muestra el ícono:

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

He dado una charla sobre cómo crear hermosas aplicaciones de Android, que incluye una explicación sobre el uso de fuentes de íconos, además de agregar degradados para hacer que los íconos sean aún más bonitos: http://www.sqisland.com/talks/beautiful-android

La explicación de la fuente del icono comienza en la diapositiva 34: http://www.sqisland.com/talks/beautiful-android/#34


10

Tal vez es demasiado tarde, pero tenía la misma necesidad, así que publiqué este https://github.com/liltof/font-awsome-for-android. Es una versión xml lista para Android de fuente impresionante, utilizable tal como dijo Keith Corwin.

Espero que ayude a otros.


1
Bienvenido a SO. Vi que tu código no es demasiado largo. ¿Por qué no lo publicas en esta respuesta? Los enlaces pueden fallar con el tiempo.
Andre Silva

He estado usando este gran archivo .xml durante semanas. Pero ahora me he dado cuenta de que se pierde fa_times. ¿Puedes por favor actualizarlo? Editar: oh, es fa_remove. o icon_remove en su archivo.
mobilGelistirici

¿Cómo agregar texto e ícono en el botón usando una fuente increíble? Al igual que agregar dibujable izquierda o dibujable derecha en el botón.
Siddharth_Vyas

9

Como arriba es un gran ejemplo y funciona muy bien:

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

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

¡PERO! > esto funcionará si la cadena dentro del botón que configuró desde xml:

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

Si necesita agregarlo dinámicamente, puede usar esto:

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

mejor manera! gracias doy + voto _ solo el botón de atención es vista de texto y reemplaza String.valueOf con get string
erfan

Finalmente una solución para usar font awesome. ¡Muchas gracias!
Clamoroso

4

Si desea setText programático sin agregar cadena a string.xml

vea su código hexadecimal aquí:

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

reemplazar & # xf066; a 0xf066

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

4

Hay una biblioteca pequeña y útil diseñada para este propósito :

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

Obtenga una demostración en Google Play .

ingrese la descripción de la imagen aquí

Puede agregar fácilmente un icono basado en fuentes en su diseño:

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

Puede inflar el icono de fuente a partir Drawablede 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"
    />

Código Java:

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

Enlaces:


Muy buena biblioteca, gracias. las definiciones xml inflables son un poco dolorosas, prefiero usar directamente FontIconView
hotzen

Probé esto en un Lenovo con Android 4.2.2 y los íconos no aparecieron, ¿qué puede ser?
Ollie Strevel

Pruebe la última versión0.1.9
Oleksii K.

2

Hice esta clase auxiliar en C # (Xamarin) para establecer mediante programación la propiedad de texto. Lo que funciona bastante bien para mí:

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
}

Debería ser lo suficientemente fácil de convertir a Java, creo. Espero que ayude a alguien!


2

Una de las bibliotecas que uso para Font Awesome es esta:

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

Específicamente,

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

La documentación es fácil de entender.

Primero, agregue las dependencias necesarias en build.gradle:

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

En segundo lugar, puede agregar esto en su 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"
/>

pero asegúrese de agregar esto en su diseño de raíz si desea usar el ejemplo de código anterior:

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

Seguí esto pero recibí el error: Error: (54) No se encontró un identificador de recurso para el atributo 'fa_icon' en el paquete 'xxx.yyy'
Hajjat

@Hajjat ​​para usar esto necesitas usar la versión 1.2.3. Acabo de actualizar el código para reflejar eso. Intentalo.
Abdul Rahman A Samad

1

La biblioteca FontView le permite usar caracteres de fuente normal / unicode como iconos / gráficos en su aplicación. Puede cargar la fuente a través de activos o una ubicación de red.

El beneficio de esta biblioteca es que:

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

Ejemplo:

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

¿Almacena en caché el objeto Typeface en la memoria? Existe un potencial conocido de pérdida de memoria al manejar fuentes en Android.
TheRealChx101

1

Hay otra buena solución que puede usar en sus archivos xml de diseño directamente y no requiere su uso setTypeface.

Es el Iconify de Joan Zapata . Puedes leer aquí las novedades en Iconify v2 . Incluye 9 bibliotecas de fuentes diferentes que puede usar simplemente agregando dependencias a su archivo build.gradle .

En los archivos xml de diseño, es posible elegir entre estos widgets:

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

1

Inicialmente cree una carpeta de activos y copie el icono fontawesome (.ttf) ¿Cómo crear una carpeta de activos?

aplicación -> clic derecho -> nuevo -> carpeta -> carpeta de activos

paso siguiente descarga ¿cómo descargar el archivo .ttf? haga clic aquí -> y haga clic en el botón de descarga después de descargar el extracto y abrir las fuentes web. finalmente elija el estilo de texto verdadero (ttf) pegue la carpeta de activos.

¿Cómo diseñar archivos XML y Java en Android?

aplicación -> res -> valores string.xml

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

este ejemplo de una fuente más Unicode haga clic aquí

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

Salida:

Imagen de salida


0

Llegué un poco tarde a la fiesta, pero escribí una vista personalizada que te permite hacer esto, por defecto está configurado en entypo, pero puedes modificarlo para usar cualquier fuente de íconos: échale un vistazo aquí: github.com/MarsVard/IconView

// editar la biblioteca es antigua y ya no es compatible ... una nueva aquí https://github.com/MarsVard/IonIconView


Su biblioteca no está almacenando en caché el Tipo de letra y, en cambio, lo está construyendo cada vez que se representa la vista.
Fernando Camargo

1
@FernandoCamargo tiene razón, esta biblioteca es antigua y debe actualizarse con un mejor almacenamiento en caché ... aquí está la nueva biblioteca con un mejor rendimiento github.com/MarsVard/IonIconView
Marte

0

En caso de que solo necesite unos pocos íconos de fuente, también puede usar http://fa2png.io para generar imágenes de píxeles normales. Pero si agrega nuevos íconos / botones regularmente, recomendaría la versión .ttf porque es más flexible.


0

Si alguien se pregunta cómo agregarlo programáticamente, debe hacerlo de esta manera.

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

0

Como todas las respuestas son grandes, pero yo no quería utilizar una biblioteca y cada solución con una sola línea de código java hecho mi Activitiesy Fragmentsmuy desordenado. Así que escribí la TextViewclase de la siguiente manera:

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

lo que debe hacer es copiar el ttfarchivo de fuente en la assetscarpeta. Y usar esta hoja de trucos para encontrar cada cadena de iconos.

espero que esto ayude.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.