Rabu, 28 Januari 2015

Font Awesome: Apa Dan Bagaimana Mengaplikasikannya Pada Blog Di Blogger (Blogspot)

Satu lagi maha karya yang dapat dinikmati oleh semua orang terutama pengguna internet atau lebih spesifik lagi: para perancang tampilan situs web, yaitu Font Awesome. Font Awesome merupakan hasil pengoptimalan kode CSS untuk dapat menampilkan ikon. Contohnya, untuk mewakili kata Beranda, mungkin seorang disainer situs web akan memasang gambar atau ikon rumah namun dengan mengaplikasikan Font Awesome maka tidak lagi memerlukan gambar atau ikon untuk mewakili kata Beranda.

Kepowan-font-awesome-apa-dan-bagaimana-mengaplikasikannya-pada-blog-di-blogger-blogspot.png
Laman Muka Situs Web Font Awesome, the iconic font and CSS toolkit

Font Awesome mulai diperkenalkan seiring dengan kehadiran Twitter Bootstrap karya Dave Gandy. Kehadirannya sangat menarik perhatian banyak disainer situs web dimana selama ini mengandalkan gambar yang dikumpulkan dalam satu berkas (atau istilah lainnya adalah sprite). Penerapan Font Awesome yang mudah dan, tentu saja, gratis semakin mendukung kepopuleran salah satu jenis huruf yang beredar diinternet.

9 Keunggulan Font Awesome

Setidaknya ada 9 keunggulan Font Awesome yang dipublikasikan, yaitu:
  1. Untuk mendapatkannya tidak membutuhkan biaya apapun alias GRATIS.
  2. Satu jenis huruf mewakili 519 ikon (dan mungkin terus bertambah).
  3. Tidak membutuhkan javascript.
  4. Dapat diterapkan dalam beragam ukuran.
  5. Dikontrol dengan kode CSS.
  6. Terlihat sangat nyaman di mata.
  7. Dapat diaplikasikan pada berbagai rangka kerja.
  8. Dapat digunakan untuk tampilan aplikasi Desktop seperti aplikasi perkantoran.
  9. Kompatible dengan ruang tampil milik pembaca.

Pengaplikasian Font Awesome

Untuk dapat menikmati keunggulan Font Awesome pada blog di Blogger (Blogspot) maka perlu memasang kode skrip dibawah ini sebelum tag </head>:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Kemudian mengaplikasikan kode skrip berikut (sesuai dengan keperluaran) untuk menampilkan ikon, yaitu:
  • class="fa fa-home fa-fw, untuk menampilkan ikon rumah,  
  • class="fa fa-book fa-fw, untuk menampilkan ikon buku,  
  • class="fa fa-pencil fa-fw, untuk menampilkan ikon pensil,  
  • class="fa fa-cog fa-fw, untuk menampilkan ikon setelan,  
Untuk lebih jelas dan mendapatkan banyak inspirasi pengaplikasian Font Awesome maka silakan mengakses tautan berikut: Font Awesome, the iconic font and CSS toolkit.

Semoga bermanfaat!

0 komentar:

Posting Komentar