Come utilizzare icone e simboli da "Font Awesome" su Applicazione Android nativa


153

Sto cercando di utilizzare Font Awesome sulla mia applicazione, sono stato in grado di integrare il font utilizzando Typeface.createFromAsset(), ma voglio anche usare le icone fornite da questo font, ma finora non sono stato in grado di farlo.

Questo particolare carattere contiene icone all'interno dell'Area uso privato Unicode (PUA), ad esempio controlli del lettore multimediale, accesso al file system, frecce, ecc.

Qualcuno ha usato caratteri che contengono icone e simboli su Android, è possibile?



2
Ho aggiornato il link
Julian Suarez il

23
Non sono d'accordo sul fatto che questo sia fuori tema per StackTranslate.it. Mi sembra che si adatti a queste linee guida ( stackoverflow.com/help/on-topic ), in quanto riguarda: un problema di programmazione specifico (come applicare un'icona specifica basata su font impostata su una piattaforma mobile specifica), ed è un problema pratico, rispondibile (vedi la mia risposta di seguito, che penso lo illustri).
Keith Corwin,

Dai un'occhiata a questo repository per l'implementazione del carattere fantastico in Android github.com/bperin/FontAwesomeAndroid
Brian

controlla questa libreria: blog.shamanland.com/p/android-fonticon-library.html , è disponibile su Maven Central. vedi demo-app: play.google.com/store/apps/…
Oleksii K.

Risposte:


307

Font Awesome sembra funzionare bene per me nella mia app Android. Ho fatto quanto segue:

  1. Copiato fontawesome-webfont.ttfnella mia cartella dei test
  2. Ho trovato le entità personaggio per le icone che volevo, usando questa pagina: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Creata una voce in strings.xml per ogni icona. Ad esempio per un cuore:

    <string name="icon_heart">&#xf004;</string>
  4. Riferito a detta voce nella vista del mio layout XML:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
  5. Ho caricato il carattere nel mio metodo onCreate e impostato per le viste appropriate:

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

46
Grande idea. Ma fai attenzione ai problemi di memoria quando crei costantemente un nuovo carattere per ogni icona. Invece, usa qualcosa come Hashtableriutilizzare il tuo carattere tipografico icona, come suggerito qui: code.google.com/p/android/issues/detail?id=9904#c7
saschoar



1
Ho dei problemi con il mio codice: se dichiaro la stringa strings.xmlcome, <string name="faicon">&#xf001;</string>allora imposto il testo nel mio codice, andrà bene. Ma quando ci provo mTextView.setText("&#xf004;");mostra solo il testo non elaborato. Qualcuno potrebbe aiutare? thks
vtproduction

2
Aggiungi una stringa dinamica a textview come questo text.setText (Html.fromHtml ("& # xf000;"));
rana_sadam,

29

Prova IcoMoon: http://icomoon.io

  • Scegli le icone che desideri
  • Assegna caratteri a ciascuna icona
  • Scarica il font

Supponiamo che tu abbia scelto l'icona di riproduzione, gli abbia assegnato la lettera 'P' e scaricato il file icomoon.ttf nella cartella delle risorse. Ecco come si mostra l'icona:

xml:

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

Giava:

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

Ho parlato della creazione di bellissime app Android, che include spiegazioni sull'uso dei caratteri icona, oltre ad aggiungere sfumature per rendere le icone ancora più belle: http://www.sqisland.com/talks/beautiful-android

La spiegazione del carattere dell'icona inizia nella diapositiva 34: http://www.sqisland.com/talks/beautiful-android/#34


10

Forse è troppo tardi, ma ho avuto la stessa necessità, quindi ho pubblicato questo https://github.com/liltof/font-awsome-for-android È una versione xml di Android pronta per l'uso del font eccezionale, proprio come ha detto Keith Corwin

Spero che possa aiutare gli altri.


1
Benvenuti in SO. Ho visto che il tuo codice non è troppo lungo. Perché non lo pubblichi con questa risposta? I collegamenti possono andare in crash nel tempo.
Andre Silva,

Sto usando questo fantastico file .xml da settimane. Ma ora ho capito che manca fa_times. Puoi aggiornarlo per favore? Modifica: oh, è fa_remove. o icon_remove nel tuo file.
mobilGelistirici,

Come aggiungere testo e icona nel pulsante usando un font fantastico? Come aggiungere disegnabile a sinistra o disegnabile a destra nel pulsante.
Siddharth_Vyas,

9

Come sopra è un ottimo esempio e funziona alla grande:

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

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

MA! > questo funzionerà se stringa all'interno del pulsante impostato da XML:

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

Se è necessario aggiungerlo in modo dinamico, è possibile utilizzare questo:

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

il modo migliore di sempre! grazie do + voto _ solo il pulsante attenzione è textview e sostituisco String.valueOf con get string
erfan

Finalmente una soluzione per usare il font fantastico. Molte grazie!
Clamoroso

4

Se si desidera setText programmatico senza aggiungere stringa a string.xml

vedi il suo codice esadecimale qui:

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

sostituisci & # xf066; a 0xf066

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

4

Esiste una libreria piccola e utile progettata per questo scopo :

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

Ottieni la demo su Google Play .

inserisci qui la descrizione dell'immagine

È possibile aggiungere facilmente un'icona basata sul carattere nel layout:

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

Puoi gonfiare l'icona-carattere come Drawableda 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"
    />

Codice Java:

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

link:


biblioteca davvero buona, grazie. le definizioni xml gonfiabili sono un po 'dolorose, preferisco usare direttamente FontIconView
hotzen

Ho provato questo in un Lenovo con Android 4.2.2 e le icone non si sono presentate, cosa può essere?
Ollie Strevel,

Prova l'ultima versione0.1.9
Oleksii K.

2

Ho creato questa classe di supporto in C # (Xamarin) per impostare programmaticamente la proprietà text. Funziona abbastanza bene per me:

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
}

Dovrebbe essere abbastanza facile da convertire in Java, penso. Spero che aiuti qualcuno!


2

Una delle librerie che utilizzo per Font Awesome è questa:

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

In particolare,

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

La documentazione è di facile comprensione.

Innanzitutto, aggiungi le dipendenze necessarie in build.gradle:

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

In secondo luogo, puoi aggiungerlo nel tuo 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"
/>

ma assicurati di aggiungere questo nel tuo layout di root se vuoi usare l'esempio di codice sopra:

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

Ho seguito questo ma ho ricevuto l'errore: Errore: (54) Nessun identificatore di risorsa trovato per l'attributo 'fa_icon' nel pacchetto 'xxx.yyy'
Hajjat

@Hajjat ​​per usare questo è necessario utilizzare la versione 1.2.3. Ho appena aggiornato il codice per riflettere quello. Provalo.
Abdul Rahman A Samad,

1

La libreria FontView ti consente di utilizzare caratteri normali / unicode come icone / grafica nella tua app. Può caricare il carattere tramite risorse o un percorso di rete.

Il vantaggio di questa libreria è che:

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

Esempio:

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

Memorizza nella cache l'oggetto Typeface? Esiste un potenziale noto per una perdita di memoria durante la gestione dei caratteri su Android.
TheRealChx101

1

C'è un'altra bella soluzione che puoi usare direttamente nei tuoi file xml di layout e che non richiede di usare setTypeface.

È Iconify di Joan Zapata . Puoi leggere qui le novità di Iconify v2 . Include 9 diverse librerie di caratteri che puoi semplicemente usare aggiungendo dipendenze al tuo file build.gradle .

Nei file di layout xml è possibile scegliere tra questi widget:

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

1

Inizialmente creare la cartella delle risorse e copiare l'icona fontawesome (.ttf) Come creare la cartella delle risorse?

app -> tasto destro del mouse -> nuovo -> cartella -> cartella delle risorse

passo successivo scaricare come scaricare il file .ttf? fai clic qui -> e fai clic sul pulsante di download dopo il download estrai e apri i caratteri web. infine scegli la cartella delle risorse incolla in stile testo vero (ttf).

come progettare file XML e Java in Android?

app -> res -> valori string.xml

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

questo esempio di un carattere in più Unicode fai clic qui

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

Produzione:

Immagine di uscita


0

Sono un po 'in ritardo alla festa ma ho scritto una vista personalizzata che ti consente di farlo, per impostazione predefinita è impostato su entypo, ma puoi modificarlo per utilizzare qualsiasi iconfont: controlla qui: github.com/MarsVard/IconView

// modifica la libreria è vecchia e non più supportata ... nuova qui https://github.com/MarsVard/IonIconView


La tua libreria non memorizza nella cache il carattere tipografico e, invece, la sta costruendo ogni volta che viene visualizzata la vista.
Fernando Camargo,

1
@FernandoCamargo ha ragione, questa libreria è vecchia e dovrebbe essere aggiornata con una migliore memorizzazione nella cache ... ecco la nuova libreria con prestazioni migliori github.com/MarsVard/IonIconView
Mars

0

Nel caso in cui hai bisogno solo di alcune fantastiche icone dei caratteri, puoi anche usare http://fa2png.io per generare normali immagini pixel. Ma se aggiungi nuove icone / pulsanti regolarmente, consiglierei la versione .ttf come più flessibile.


0

Se qualcuno si chiede come aggiungerlo programmaticamente, devi farlo in questo modo.

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

0

Come tutte le risposte sono fantastiche ma non volevo usare una libreria e ogni soluzione con un solo codice java di riga ha reso il mio Activitiese Fragmentsmolto disordinato. Quindi ho scritto la TextViewlezione come segue:

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

quello che dovresti fare è copiare il ttffile del font nella assetscartella e usare questo cheat sheet per trovare ogni stringa di icone.

spero che questo ti aiuti.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.