Cara Menulis Postingan Menggunakan Font Awesome
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. Untuk CSS dan pemasangannya, Sahabat bisa search di google atau langsung dari web http://fontawesome.io/icons/
Hasilnya:
fa-lg fa-2x fa-3x fa-4x fa-5x
Untuk kode fontnya bisa ditemukan di http://fontawesome.io/icons/
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
Dengan memasukkan URL menggantikan #, maka hasilnya:
Whatsapp Gerry Atje
Hasilnya:
Kali ini saya baru saja mengetahui tentang font Awesome. Ini keren banget. 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
<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> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 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>
<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: