Saturday, August 11, 2018

Konfigurasi Baru Font Awesome

Halo CS Reader! Dunia blog tidak hanya melulu tentang artikel dan SEO, tetapi juga tentang tampilan atau desain dari blog itu sendiri. Beberapa template blog dari yang gratis hingga berbayar memiliki fitur ciamik dan juga tampilan yang menarik.
Tidak bisa dipungkiri bahwa penggunaan Icon dapat mempercantik tampilan sebuah blog. Bagi pembuat template maupun blogger lawas, tentu tidak asing dengan yang namanya Font Awesome. Yups, ini merupakan salah satu penyedia icon dalam bentuk font. Selain digunakan pada tampilan blog, Font Awesome juga dapat digunakan layaknya font biasa di program pengolah kata, maupun program pengolah atau pembuat gambar. Namun pada artikel kali ini saya hanya akan menjelaskan tentang konfigurasi baru penggunaan Font Awesome untuk tampilan web.
Font Awesome rilis pada tahun 2012, tepatnya pada tanggal 21 Agustus 2012. Hingga sekarang, Font Awesome telah merilis versi 5.2.0 (23 Juli 2018), dan sudah mempunyai lebih dari 3500 icon. Disamping penambahan jumlah icon, cara pengunaan versi terbaru dari Font Awesome juga mengalami perubahan. Perbedaan yang mencolok adalah adanya klasifikasi jenis font. Jika dulu tidak ada klasifikasi spesifik, pembaharuan versi terbaru mempunyai 3 klasifikasi icon diantaranya adalah Regular, Solid dan Brand. Cara menggunakannya pun jadi berbeda.

Cara Penggunaan

Okay, masuk ke inti dari artikel. Jika anda tertarik untuk memperbaharui Font Awesome pada blog anda ke versi 5.2.0 berikut panduannya.
  1. Ganti link stylesheet ke link yang diberikan langsung oleh Font Awesome yaitu...
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"/>
  2. Cek blog anda, sesuaikah icon yang terdahulu dengan yang sekarang? Jika belum maka sesuaikan secara manual dengan cara edit css.

Cara Penyesuaian

Ini adalah tahap lebih lanjut. Ini diperlukan untuk anda yang mengalami masalah di tampilan icon setelah update versi.
  1. Jika anda menggunakan Font Awesome sebagai font dasar, maka anda hanya perlu menambahkan 2 jenis font di bawah ini.
    "Font Awesome 5 Free"
    "Font Awesome 5 Brands"
  2. Jika anda mendeklarasikan jenis font setiap id atau class, maka anda harus mengidentifikasi jenis icon mana yang digunakan pada icon yang bermasalah. Kemudian tambahkan salah satu jenis font yang diatas sesuai dengan jenis yang digunakan.
  3. Jika anda menggunakan class langsung dari stylesheet bawaan, maka:
    • Gunakan class fa, atau far, atau fas untuk klasifikasi Regular dan Solid.
    • Gunakan class fab untuk klasifikasi Brand.

Perbedaan Klasifikasi Font

Nah pertanyaan selanjutnya adalah? Bagaimana menentukan klasifikasi font yang digunakan? Perbedaan paling mencolok dari ketiga klasifikasi font adalah adanya klasifikasi Brands. Klasifikasi brands ini, sesuai namanya, berisi berbagai macam icon dari brand-brand yang ada di dunia, seperti Facebook, Google, dan sebagainya. Jadi, jika anda ingin menampilkan icon yang mewakili logo dari brand tersebut, seperti ingin menampilkan link sosmed, maka gunakan jenis brands.
Perbedaan antara Regular dan Solid sebenarnya tidak jauh, dan bisa diakali dengan mengganti content dari icon yang digunakan. Oh iya, terakhir, beberapa icon telah berubah content-nya, maka anda perlu untuk membuka website Font Awesome untuk memastikannya.

Okay cukup sekian penjelasan dari saya, mudah-mudahan bisa dipahami. Bila ada kesalahan mohon maaf. Pun bila masih belum jelas, silahkan tanyakan di kolom komentar. Terimakasih sudah mau berkunjung di blog ini dan membaca tulisan ini. Akhir kata, Salam Blogger Indonesia!.

https://en.wikipedia.org/wiki/Font_Awesome
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

Blogger, Designer, Future Programmer.

► Gunakanlah akun terdaftar untuk berkomentar.
► Berkomentarlah yang Relevan, Santun dan Bijaksana.
► Dilarang menggunakan (link) aktif / hidup!.
► Tambahkan satu spasi didepan kode emo dan gunakan kode emo standar untuk menyisipkan emo.

Khusus untuk membalas komentar, disarankan menggunakan tombol Balas di samping komentar terkait, agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
EmoticonEmoticon