Pemrograman

Bahasa

Framework

Peralatan

Info

5 Langkah untuk Mengetahui Cara Penggunaan Font Awesome pada Web

– 21 August 2016
Dulu saya sempat berpikir, pembuatan web kelihatannya susah. Karena banyak komponen yang harus dibuat, seperti background dan ikon. Tapi ternyata tidak, soalnya ada framework yang dapat kita gunakan untuk membuat ikon dengan cepat. Nama framework-nya adalah Font Awesome.

Font awesome merupakan sebuah framework CSS untuk membuat ikon. Font awesome memiliki ratusan ikon yang siap dipakai. Pada kesempatan ini, kita akan belajar cara menggunakanya. Silahkan disimak.

1. Download Font Awesome


Silahkan download Font Awesome di http://fontawesome.io/, kemudian ekstrak isinya ke dalam direktori proyek (web).

Jangan lupa untuk mengubah namanya menjadi font-awesome saja, agar mudah disisipkan dalam kode HTML. Serta, tambahkan juga file index.html-nya.

2. Menyisipkan Font Awesome

Penggunaan Font Awesome sama seperti Bootstrap. Kita tinggal me-link-kan file CSS-nya ke dalam file HTML web kita. Contoh:
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
Anda juga dapat memanfaatkan CDN, bila ingin menggunakan Font Awesome tampa hosting.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

3. Membuat Ikon

Ikon dapat kita buat dengan tag inline yang disertai kelas fa (font awesome). Biasanya pada Bootstrap, kita menggunakan tag <span> untuk membuat ikon. Namun, pada Font Aawsome disarankan menggunakan tag <i>. Karena lebih pendek. Contoh:
<i class="fa fa-coffee"></i>
  • fa = Nama kelas Font Awesome, wajib dipakai.
  • fa-coffee = Nama ikon yang akan dipakai, lebih lengkap dapat dilihat di sini.
Hasil dari contoh di atas adalah:

4. Ukuran Ikon

Ukuran ikon akan mengikuti ukuran font pada CSS, tapi dapat kita perbesar dan perkecil sesuai kebutuhan. Font Awesome menyediakan kelas-kelas untuk menentukan ukuran ikon, diantaranya: fa-lg (33% lebih besar),  fa-2x, fa-3x, fa-4x, dan fa-5x. Contoh penggunaan:
<i class="fa fa-coffee fa-2x"></i>
Maka akan menghasilkan:

5. Ikon dengan Animasi

Font-awesome menyediakan kelas untuk menggerakkan ikon, diantaranya: fa-spin dan fa-pulse. Kelas ini terlihat bagus bila diterapkan pada ikon fa-refresh, fa-cog, dan fa-spinner. Contoh penggunaan:
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
Hasilnya:

Loading...

Loading...

Loading...

Loading...

Loading...

Itulah 5 langkah untuk mengetahui cara penggunaan Font Awesome pada web. Penjelasan lebih lanjut, anda bisa pelajari di web Font Awesome.