Home › kodular › Teknologi › TIPS DAN INFO

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io

AnonSec Team 1 year ago 4 min read

Font Awesome yang merupakan salah satu font yang digunakan untuk membuat simbol-simbol pada komponen, objek, atau widget tertentu. Simbol ini bisa menggambarkan sesuatu hal yang secara tidak tertulis. Misalkan, simbol trash yang menggambarkan kita harus membuang sampah ke tempat sampah.

Untuk saat ini, Font Awesome telah memasuki versi terbaru yakni versi 6 yang dimana mendatangkan lebih banyak simbol lagi daripada versi sebelumnya. Namun, penulis memfokuskan dalam penggunaan Font Awesome versi 4.7 yang dimana masih banyak digunakan oleh UI / UX Designer atau Frontend Developer berlaku semua platform.

Penulis memberikan tutorial cara menggunakan Font Awesome 4.7 untuk Button dengan Kodular. Hal ini berguna untuk tampilan button seperti menu atau fitur dengan menggunakan simbol (font bukan bitmap) pada pembuatan aplikasi Android di Kodular.

TUTORIAL VIA VIDEO :

A. LANGKAH-LANGKAH :

1. Aktifkan web browser di komputer atau laptop anda.

2. Ketikkan http://c.kodular.io pada address bar. Tunggu sampai halaman utama muncul.

3. Melakukan login dengan cara manual atau sistem OAuth. Tunggu beberapa saat sampai redirect ke homepage.

4. Klik Create Project untuk membuat project yang baru.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-2

5. Ketikkan pengisian project yang bernama "fontawesomebtn1", klik Next.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-3

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-12

6. Aturlah tampilan UI aplikasi Android dan / atau kustomisasi nama package, klik Finish.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-4

7. Drag komponen Button ke Screen1.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-5

8. Pilihlah Font Typeface yakni Font Awesome.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-6

9. Masukkan Unicode Font Awesome ke dalam kolom Text, tekan Enter.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-7

10. Klik Advanced properties.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-8

11. Centangkan HTML Format.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-9

12. Aturlah ukuran font-nya, tekan Enter.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-10

CARA MENGAMBIL KODE CHARTSET FONT AWESOME :

1. Kunjungin situs https://fontawesome.com/v4.7.0/cheatsheet/ . Hal ini berguna untuk mendapat Unicode Font Awesome.

Cara Menggunakan Font Awesome 4.7 untuk Button dengan Kodular.io-11

2. Salinkan Unicode tersebut dengan sesuai kebutuhan ke Button tadi.

3. Kembali ke situs Kodular Creator untuk paste-kan Unicode tersebut ke Button tadi yang terdapat pada bagian A langkah ke-9.

Jadi, kamu bisa menggunakan Font Awesome 4.7 untuk membuat button menjadi lebih menarik untuk dilihat oleh pengguna gadget dalam aplikasi Android buatan kamu, sehingga tidak memerlukan tambahkan teks ke dalam button lagi.

Sekian...

Terima kasih...