Cara-Memasang-dan-Menggunakan-Font-Awesome-Nyekrip

Dalam tutorial cara memasang dan menggunakan font awesome, kita akan mencoba untuk mengenal, memasang dan menggunakan font ini dalam template kita. Banyak para pengembang web yang menggunakan font ini kedalam proyek mereka, dan sekarang (mei 2015) font ini sudah di versi 4.3.0 dengan 519 total ikon. Apa saja keuntungan dan cara memasangnya?

Keuntungan Menggunakan Font Awesome

Dengan Font Awesome, kita bisa membuat ikon yang menarik dengan hanya menggunakan teks (tanpa gambar) sehingga bisa meningkatkan kecepatan blog. Dengan menggunakan Font Awesome, antarmuka website jadi lebih mudah diakses meskipun teks pada tombol dalam bahasa asing, dan juga membuat kita lebih mudah untuk memahami konten.

Nama Font Awesome menunjukkan bahwa itu adalah font (huruf), sehingga kita dengan mudah mengubah warna dan ukuran dengan bantuan dari skrip CSS. Hal yang paling penting adalah bahwa huruf berbentuk ikon ini bisa terlihat dengan baik pada setiap perangkat (bahkan pada layar retina).

Menggunakan Font Awesome merupakan salah satu usaha untuk merubah tampilan website atau blog menjadi menarik, untuk langkah lain-nya ikuti tutorial ” Cara Membuat Tampilan Blog / Website Menarik ” dan ” Cara Membuat Template Web Responsive HTML 5 “.

Cara Memasang Font Awesome ke HTML atau Template

Sebenarnya ada banyak cara memasang dan cara menggunakan Font Awesome pada template kita. Kita akan fokus pada yang paling mudah yaitu dengan menggunakan Bootstrap CDN. Pertama, kita harus mendapatkan link dari Font Awesome dengan mengunjungi alamat ” http://fortawesome.github.io/Font-Awesome/get-started/ ” dan salin link tersebut. Lebih jelasnya perhatikan gambar dibawah.

Cara_Memasang_dan_Menggunakan_Font_Awesome_salin_link_Nyekrip

Salin Link di Area Hijau

Selanjutnya, kita perlu menemukan bagian kepala dari situs kita, caranya cari elemen head atau tag <head> dan tambahkan link berikut (Font Awesome V 4.3.0) sebagai sumber eksternal kedalam elemen head tersebut:

Jika anda menggunakan template wordpress, cara terbaik adalah dengan menggunakan fungsi wp_enqueue_style yang diletak-kan dalam file function.php. Contohnya sebagai berikut :

Sedangkan jika ingin diterapkan ke blogger atau blogspot, caranya persis seperti cara dibawah ini.

Cara Menggunakan Font Awesome ke HTML atau Template

Oke, saatnya kita mempelajari cara menggunakan font awesome. Daftar semua ikon yang tersedia dapat ditemukan di halaman Font Awesome Icons. Untuk belajar cara menggunakan font ini, mari kita buat dulu satu file HTML yang sekaligus kita tambahkan link Font Awesome seperti berikut.

Oke, sekarang mari kita lihat beberapa contoh ikon beserta nama kode-nya. Perhatikan gambar berikut.

Cara_Memasang_dan_Menggunakan_Font_Awesome_Ikon_Diamond_Nyekrip

Ikon Diamond

Mari kita ambil contoh dengan menggunakan ikon berlian, ikon tersebut memiliki nama diamond. Untuk memakai ikon tersebut kita cukup mengetik-kan class="fa fa-diamond", kata diamond disini diambil dari nama ikon tersebut dan atribut class ini dapat disertakan dalam elemen i atau lainnya. Sekarang kita coba dengan menambahkan ikon tersebut kedalam file HTML kita (class kita masuk-kan dalam elemen i). Maka skrip HTML kita menjadi seperti ini:

Jika skrip diatas dijalankan, maka akan tampil seperti gambar dibawah ini:

Cara_Memasang_dan_Menggunakan_Font_Awesome_Gambar_Diamond_Nyekrip

Ikon Diamond

Jika kita ingin agar ikon diamond berputar, maka cukup tambahkan value fa-spin. Perhatikan skrip dibawah ini:

Untuk pengaturan lainnya, kita bisa mempelajari lagsung melalui halaman Font Awesome Examples. Dalam halaman tersebut, ikon bisa kita atur supaya berputar, dibalik, di beri border dan masih banyak lagi. Demikian tutorial memasang dan menggunakan Font Awesome.

Demikian tutorial cara memasang dan menggunakan font awesome, Perlu untuk diketahui jika pada versi sebelumnya (versi 3.2.1), Font Awesome mengalami perubahan pada kode pemanggilan ikon dan juga pada link dari Netdna menjadi MaxCDN, untuk itu sebelum memutuskan untuk update ikon, kita harus mempelajari lagi bagaimana cara pengambilan link dan pemanggilan ikon tersebut (takut-nya ada perubahan lagi).

Happy Nyekrip!

About The Author

Comments

  1. Pingback: Cara Memasang dan Menggunakan Font Awesome | abangdidi.com

  2. Pingback: Cara Memasang dan Menggunakan Font Awesome | Meteorpost

  3. Pingback: Cara Memasang dan Menggunakan Font Awesome | Portal Tricks

    1. Admin Article Author

      ya di sumber pembuatnya gan di font awesome.. cari di google dengan kata kunci ” font awesome github ” 🙂

  4. Ari Setiawan

    bang saya mau tanya, kalo cara menggunakannya di offline mode gimana bang ? udah download fontnya tapi gak nemu cara makenya. kalo cara di atas kan harus ada koneksi internet.

    1. Admin Article Author

      langsung saja download dan sambungkan seperti biasa.
      link rel=”stylesheet” href=”alamat file css pada lokal komputer anda”

  5. Bintang Fisabilly

    Saya baru menjelajahi blog ini dan ketemu artikel ini.. saya kira font awesome itu “font”, bukan “icon” 😀 Tapi keren min.. kalo cara masangnya di samping menu bisa gak?

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *