web-dev-qa-db-fra.com

Comment utiliser les icônes et les symboles de "Font Awesome" sur une application Android native

J'essaie d'utiliser Font Awesome sur mon application, j'ai pu intégrer la police à l'aide de Typeface.createFromAsset(), mais je souhaite également utiliser les icônes fournies par cette police, mais je n'ai pas encore réussi à le faire. cette. 

Cette police particulière contient des icônes à l'intérieur de la zone PUA (Unicode Private Use Area), pour des éléments tels que les commandes du lecteur multimédia, l'accès au système de fichiers, les flèches, etc.

Quelqu'un a-t-il utilisé des polices contenant des icônes et des symboles sur Android, est-ce possible?

androidfont-awesome
146
Julian Suarez

Font Awesome semble bien fonctionner pour moi dans mon application Android. J'ai fait ce qui suit:

  1. fontawesome-webfont.ttf copié dans mon dossier assests
  2. Trouvé les entités de caractère pour les icônes que je voulais, en utilisant cette page: http://fortawesome.github.io/Font-Awesome/cheatsheet/

  3. Création d'une entrée dans strings.xml pour chaque icône. Par exemple pour un coeur:

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

  4. Référencé ladite entrée dans la vue de ma mise en page XML:

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

  5. Charge la police dans ma méthode onCreate et la définit pour les vues appropriées:

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

Essayez IcoMoon: http://icomoon.io

  • Choisissez les icônes que vous voulez
  • Attribuer des caractères à chaque icône
  • Télécharger la police

Supposons que vous ayez sélectionné l’icône de lecture, que vous lui ayez attribué la lettre «P» et que vous avez téléchargé le fichier icomoon.ttf dans votre dossier de ressources. Voici comment vous affichez l'icône:

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

J'ai donné une conférence sur la création de belles applications Android, qui inclut des explications sur l'utilisation des polices à icônes, ainsi que sur l'ajout de dégradés pour rendre les icônes encore plus jolies: http://www.sqisland.com/talks/beautiful-Android

L’explication des polices d’icône commence à la diapositive 34: http://www.sqisland.com/talks/beautiful-Android/#34

27
chiuki

Peut-être trop tard, mais j’ai eu le même besoin, j’ai donc publié ce https://github.com/liltof/font-awsome-for-Android Il s’agit d’une version xml prête à utiliser Android comme dit Keith Corwin 

J'espère que cela aidera les autres.

10
liltof

Comme ci-dessus, c'est un excellent exemple et qui fonctionne très bien:

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

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

MAIS! > cela fonctionnera si la chaîne à l'intérieur du bouton que vous définissez à partir du XML: 

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

Si vous avez besoin de l'ajouter dynamiquement, vous pouvez utiliser ceci:

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

Si vous voulez programmer setText sans ajouter de chaîne à string.xml

voir son code hexadécimal ici:

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

remplacez & # xf066; à 0xf066

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

Il est petit et utile bibliothèque conçue à cet effet :

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

Obtenir une démo sur Google Play .

enter image description here

Vous pouvez facilement ajouter une icône basée sur les polices dans votre mise en page:

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

Vous pouvez gonfler font-icon en tant que Drawable à partir de 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"
    />

Code Java:

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

Liens:

4
Oleksii K.

J'ai créé cette classe d'assistance en C # (Xamarin) pour définir par programme la propriété text. C'est ce qui fonctionne plutôt bien pour moi:

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
}

Devrait être assez facile à convertir en Java, je pense. J'espère que ça aide quelqu'un!

2
Andres Sepulveda

Une des bibliothèques que j'utilise pour Font Awesome est la suivante:

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

Plus précisément, 

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

La documentation est facile à comprendre. 

Premièrement, ajoutez les dépendances nécessaires dans le build.gradle:

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

Deuxièmement, vous pouvez ajouter ceci dans votre 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"
/>

mais assurez-vous de l'ajouter dans votre mise en page racine si vous souhaitez utiliser l'exemple de code ci-dessus: 

    xmlns:fontawesometext="http://schemas.Android.com/apk/res-auto"
2
Abdul Rahman A Samad

Il existe une autre solution intéressante que vous pouvez utiliser directement dans vos fichiers XML de mise en page et qui n’a pas besoin d’utiliser setTypeface.

C'est Joan Zapata Iconify . Vous pouvez lire ici les nouveautés de Iconify v2. Il comprend 9 bibliothèques de polices différentes que vous pouvez simplement utiliser en ajoutant des dépendances à votre fichier build.gradle.

Dans les fichiers XML de mise en page, il est possible de choisir entre ces widgets:

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

La bibliothèque FontView vous permet d'utiliser des caractères de police normaux/unicodes en tant qu'icônes/graphiques dans votre application. Il peut charger la police via des ressources ou un emplacement réseau.

L'avantage de cette bibliothèque est 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

Exemple:

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

Si quelqu'un se demande comment l'ajouter par programme, il faut le faire de cette façon.

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

Je suis un peu en retard pour la fête, mais j’ai écrit un affichage personnalisé qui vous permet de le faire. Par défaut, il est défini sur entypo, mais vous pouvez le modifier pour utiliser n’importe quel iconfont: consultez-le ici: github.com/MarsVard/IconView

//edit la bibliothèque est ancienne et n'est plus supportée ... une nouvelle ici https://github.com/MarsVard/IonIconView

0
Mars

Comme toutes les réponses sont bonnes, mais je ne voulais pas utiliser de bibliothèque et chaque solution avec une seule ligne de code Java rendait mes Activities et Fragments très désordonnés . J'ai donc écrit la classe TextView comme suit:

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

ce que vous devez faire est de copier le fichier de police ttf dans le dossier assets. Et utilisez cette aide-mémoire pour trouver chaque chaîne d’icônes.

j'espère que cela t'aides.

0
pouya

Au cas où vous n’auriez besoin que de quelques superbes icônes de polices, vous pouvez également utiliser http://fa2png.io pour générer des images en pixels normales. Mais si vous ajoutez régulièrement de nouvelles icônes/boutons, je vous recommande la version .ttf, car elle est plus flexible. 

0
j7nn7k

Créez initialement un dossier de ressources et copiez l’icône fontawesome (.ttf) Comment créer un dossier de ressources?

app -> clic droit -> nouveau -> dossier -> dossier de ressources

étape suivante télécharger comment télécharger le fichier .ttf? cliquez ici -> et cliquez sur le bouton de téléchargement après le téléchargement, extrayez et ouvrez les polices Web. Enfin, choisissez le vrai style de texte (ttf) et collez le dossier des ressources.

comment concevoir des fichiers XML et Java sous Android?

app -> res -> valeurs string.xml

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

cet exemple d'une police plus Unicode cliquez ici

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

Sortie:

Image de sortie

0
Manoj Kumar T