Cara Menulis Postingan Menggunakan Font Awesome


Syalom Sahabat.
Keberadaan label Kreasi Menulis di Blog ini samasekali tidak bermaksud untuk memberikan tutorial. Alasan sederhananya adalah karena saya memang membutuhkan catatan tersendiri untuk memuat script-script yang bisa digunakan untuk kepentingan menulis blog. Oleh sebab itulah seringkali saya mengabaikan detail yang menurut saya Sahabat bisa temukan di google; Detail seperti definisi, langkah-langkah detail, dll biasanya gak saya tulis. Biasanya saya langsung pada pokok tujuan: Jika saya menggunakan script tersebut, apa yang harus saya lakukan? Itulah yang saya tulis dalam label Kreasi Menulis di Blog.

Kali ini saya baru saja mengetahui tentang font Awesome. Ini keren banget (dan saya telat tahu, hahaha). Untuk CSS dan pemasangannya, Sahabat bisa search di google atau langsung dari web http://fontawesome.io/icons/

I. Menggunakan Awesome Font dengan Ukuran yang kita mau

Kode Dasar: 
<i class="fa fa-kode-icon"></i>

Contoh:
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Hasilnya:
fa-lg fa-2x fa-3x fa-4x fa-5x

Untuk kode fontnya bisa ditemukan di http://fontawesome.io/icons/

II. Menggunakan Awesome Font yang memiliki fungsi link

<a class="fa fa-whatsapp" href="#"> Whatsapp Gerry Atje </a>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

Dengan memasukkan URL menggantikan #, maka hasilnya:
Whatsapp Gerry Atje

III. Menggunakan Awesome Font dengan menambahkan fa-spin

<i class="fa fa-spinner fa-spin"></i> 
<i class="fa fa-car fa-spin"></i> 
<i class="fa fa-cog fa-spin"></i> 
<i class="fa fa-refresh fa-spin"></i>

Hasilnya:
Previous
Next Post »