Cara menggunakan ikon dan simbol dari "Font Awesome" di Aplikasi Android Asli


153

Saya mencoba menggunakan Font Awesome pada aplikasi saya, saya dapat mengintegrasikan penggunaan font Typeface.createFromAsset(), tetapi saya juga ingin menggunakan ikon yang disediakan oleh font ini, tetapi sejauh ini saya belum bisa melakukan itu.

Font khusus ini berisi ikon di dalam Unicode Private Use Area (PUA), untuk hal-hal seperti kontrol pemutar media, akses sistem file, panah, dll.

Adakah yang menggunakan font yang mengandung ikon dan simbol di Android, apakah ini mungkin?



2
Saya telah memperbarui tautan
Julian Suarez

23
Saya tidak setuju bahwa ini di luar topik untuk Stack Overflow. Menurut saya itu sesuai dengan pedoman ( stackoverflow.com/help/on-topic ) ini, karena: tentang masalah pemrograman tertentu (cara menerapkan ikon berbasis font tertentu yang disetel ke platform seluler tertentu), dan itu adalah praktis, masalah yang dapat dijawab (lihat jawaban saya di bawah, yang menurut saya menggambarkan hal itu).
Keith Corwin

Lihat repo ini untuk menerapkan font yang mengagumkan di android github.com/bperin/FontAwesomeAndroid
Brian

periksa perpustakaan ini: blog.shamanland.com/p/android-fonticon-library.html , tersedia di Maven Central. lihat aplikasi-demo: play.google.com/store/apps/…
Oleksii K.

Jawaban:


307

Font Awesome tampaknya berfungsi dengan baik untuk saya di aplikasi android saya. Saya melakukan yang berikut:

  1. Disalin fontawesome-webfont.ttfke folder assests saya
  2. Menemukan entitas karakter untuk ikon yang saya inginkan, menggunakan halaman ini: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Membuat entri di strings.xml untuk setiap ikon. Misalnya untuk hati:

    <string name="icon_heart">&#xf004;</string>
  4. Entri yang direferensikan dalam tampilan tata letak xml saya:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
  5. Memuat font dalam metode onCreate saya dan mengaturnya untuk Tampilan yang sesuai:

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

46
Ide yang hebat. Namun waspadalah terhadap masalah memori saat terus-menerus membuat jenis huruf baru untuk setiap ikon. Alih-alih, gunakan sesuatu seperti Hashtablemenggunakan kembali ikon jenis huruf Anda, seperti yang disarankan di sini: code.google.com/p/android/issues/detail?id=9904#c7
saschoar

1
saya melakukannya seperti ini: stackoverflow.com/questions/2973270/…
Informatic0re


1
Saya memiliki beberapa masalah dengan kode saya: Jika saya mendeklarasikan string dalam strings.xmlseperti <string name="faicon">&#xf001;</string>kemudian mengatur teks dalam kode saya, itu akan baik-baik saja. Tetapi ketika saya coba mTextView.setText("&#xf004;");hanya menampilkan teks mentah. Adakah yang bisa membantu? thks
vtproduction

2
Tambahkan string dinamis ke tampilan teks seperti ini text.setText (Html.fromHtml ("& # xf000;"));
rana_sadam

29

Coba IcoMoon: http://icomoon.io

  • Pilih ikon yang Anda inginkan
  • Tetapkan karakter untuk setiap ikon
  • Unduh fontnya

Katakanlah, Anda memilih ikon permainan, menetapkan huruf 'P' untuknya, dan mengunduh file icomoon.ttfke folder aset Anda. Ini adalah bagaimana Anda menunjukkan ikon:

xml:

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

Jawa:

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

Saya telah memberi ceramah tentang membuat aplikasi Android yang indah, yang mencakup penjelasan tentang cara menggunakan font ikon, ditambah menambahkan gradien untuk membuat ikon lebih cantik: http://www.sqisland.com/talks/beautiful-android

Penjelasan font ikon dimulai pada slide 34: http://www.sqisland.com/talks/beautiful-android/#34


10

Mungkin sudah terlambat tetapi saya memiliki kebutuhan yang sama jadi saya telah menerbitkan https://github.com/liltof/font-awsome-for-android Ini adalah versi android xml siap font yang dapat digunakan seperti kata Keith Corwin

Semoga ini bisa membantu orang lain.


1
Selamat datang di SO. Saya melihat kode Anda tidak terlalu lama. Mengapa Anda tidak mempostingnya di jawaban ini? Tautan dapat macet seiring waktu.
Andre Silva

Saya telah menggunakan file .xml yang luar biasa ini selama berminggu-minggu. Tapi sekarang saya sudah menyadari bahwa itu merindukan fa_times. Bisakah Anda memperbaruinya? Sunting: oh, ini fa_remove. atau icon_remove dalam file Anda.
mobilGelistirici

Bagaimana cara menambahkan teks serta ikon di tombol menggunakan font yang mengagumkan? Seperti menambahkan kiri drawable atau tombol kanan drawable.
Siddharth_Vyas

9

Seperti di atas adalah contoh yang bagus dan bekerja sangat baik:

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

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

TAPI! > ini akan berfungsi jika tombol string di dalam Anda atur dari xml:

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

Jika Anda perlu menambahkannya secara dinamis dapat menggunakan ini:

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

cara terbaik yang pernah ada! terima kasih saya beri + suara _ hanya tombol perhatian adalah textview dan ganti String.valueOf dengan get string
erfan

Akhirnya solusi untuk menggunakan font yang luar biasa. Terima kasih banyak!
Clamorious

4

Jika Anda ingin setText terprogram tanpa menambahkan string ke string.xml

lihat kode heksadesimalnya di sini:

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

ganti & # xf066; ke 0xf066

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

4

Ada perpustakaan kecil dan berguna yang dirancang untuk tujuan ini :

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

Dapatkan demo di Google Play .

masukkan deskripsi gambar di sini

Anda dapat dengan mudah menambahkan ikon berbasis font di tata letak Anda:

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

Anda dapat mengembang font-ikon Drawablesejak 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"
    />

Kode Java:

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

Tautan:


perpustakaan yang sangat bagus, terima kasih. definisi xml tiup agak menyusahkan, saya lebih suka langsung menggunakan FontIconView
hotzen

Saya menguji ini di Lenovo dengan Android 4.2.2 dan ikon tidak muncul, apa yang bisa?
Ollie Strevel

Coba versi terbaru0.1.9
Oleksii K.

2

Saya membuat kelas pembantu ini dalam C # (Xamarin) untuk secara terprogram mengatur properti teks. Itu yang bekerja cukup baik untuk saya:

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
}

Seharusnya cukup mudah untuk mengkonversi ke Jawa, saya pikir. Semoga ini bisa membantu seseorang!


2

Salah satu perpustakaan yang saya gunakan untuk Font Awesome adalah ini:

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

Secara khusus,

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

Dokumentasinya mudah dimengerti.

Pertama, tambahkan dependensi yang diperlukan di build.gradle:

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

Kedua, Anda dapat menambahkan ini dalam XML Anda:

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

tetapi pastikan Anda menambahkan ini di tata letak root Anda jika Anda ingin menggunakan contoh kode di atas:

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

Saya mengikuti ini tetapi saya mendapat kesalahan: Kesalahan: (54) Tidak ditemukan pengidentifikasi sumber daya untuk atribut 'fa_icon' dalam paket 'xxx.yyy'
Hajjat

@Hajjat ​​untuk menggunakan ini, Anda harus menggunakan versi 1.2.3. Saya baru saja memperbarui kode untuk mencerminkan hal itu. Cobalah.
Abdul Rahman A Samad

1

Pustaka FontView memungkinkan Anda menggunakan karakter font normal / unicode sebagai ikon / grafik di aplikasi Anda. Itu dapat memuat font melalui aset atau lokasi jaringan.

Manfaat perpustakaan ini adalah:

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

Contoh:

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

Apakah itu men-cache objek Typeface di memori? Ada potensi kebocoran memori yang diketahui saat menangani font di Android.
TheRealChx101

1

Ada solusi bagus lain yang dapat Anda gunakan dalam file xml layout Anda secara langsung dan tidak perlu digunakan setTypeface.

Hal ini Joan Zapata Iconify . Anda dapat membaca di sini apa yang baru di Iconify v2 . Ini mencakup 9 pustaka font berbeda yang bisa Anda gunakan dengan menambahkan dependensi ke file build.gradle Anda .

Di file layout xml, Anda dapat memilih di antara widget ini:

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

1

Awalnya buat folder aset dan salin ikon fontawesome (.ttf) Bagaimana membuat folder aset?

app -> Klik kanan -> baru -> folder -> folder aset

langkah selanjutnya unduh cara mengunduh file .ttf? klik di sini -> dan klik tombol unduh setelah mengunduh ekstrak dan buka font web. akhirnya pilih true text style (ttf) paste folder aset.

bagaimana cara mendesain file xml dan java di android?

app -> res -> values ​​string.xml

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

contoh ini satu lagi huruf Unicode klik di sini

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

Keluaran:

Output gambar


0

Saya agak terlambat ke pesta, tetapi saya menulis tampilan khusus yang memungkinkan Anda melakukan ini, secara default diatur ke entypo, tetapi Anda dapat memodifikasinya untuk menggunakan sembarang ikon: periksa di sini: github.com/MarsVard/IconView

// edit perpustakaan sudah tua dan tidak didukung lagi ... yang baru di sini https://github.com/MarsVard/IonIconView


Pustaka Anda tidak melakukan caching Typeface dan, sebaliknya, membangunnya setiap kali tampilan ditampilkan.
Fernando Camargo

1
@FernandoCamargo Benar, perpustakaan ini sudah tua dan harus diperbarui dengan caching yang lebih baik ... di sini adalah perpustakaan baru dengan kinerja yang lebih baik github.com/MarsVard/IonIconView
Mars

0

Jika Anda hanya membutuhkan beberapa ikon font yang mengagumkan, Anda juga dapat menggunakan http://fa2png.io untuk menghasilkan gambar piksel normal. Tetapi jika Anda menambahkan ikon / tombol baru secara teratur, saya akan merekomendasikan versi .ttf karena lebih fleksibel.


0

Jika seseorang bertanya-tanya bagaimana cara menambahkannya secara program, Anda harus melakukannya dengan cara ini.

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

0

Karena semua jawaban bagus tetapi saya tidak ingin menggunakan perpustakaan dan setiap solusi hanya dengan satu kode java membuat saya Activitiesdan Fragmentssangat berantakan. Jadi saya lebih menulis TextViewkelas sebagai berikut:

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

yang harus Anda lakukan adalah menyalin ttffile font ke assetsfolder. Dan gunakan lembar cheat ini untuk menemukan setiap string ikon.

semoga ini membantu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.