Apa itu Font Awesome, dan bagaimana Anda menggunakannya?

Font Awesome dibuat untuk memudahkan Anda menambahkan ikon vektor dan logo sosial ke situs web Anda.

Font Awesome Adalah webfont yang digunakan oleh perancang situs web & pengembang untuk ikon, bukan seperti ikon lama yang berformat gambar.

Dengan Font Awesome lebih fleksibel untuk diwarnai, merubah ukuran & dan meletakkannya pada css biasa. Anda dapat menggunakannya dengan mengedit file css di situs web Anda.

Contoh penerapan Font Awesome dalam Situs adalah seperti ini :

<i class="fa fa-address-book"></i>

Menggunakan Font Awesome sangat mudah untuk di gunakan pada situs web atau aplikasi Anda, semua hanya dengan satu baris kode. Tanpa mengunduh atau menginstal!

Mudah digunakan
Bisa diintegrasikan ke template website
Compatible dengan Bootstrap.
Fully open source, artinya anda bisa menggunakannnya untuk keperluan komersil, open source projects, dan sebagainya
Dokumentasi yang lengkap dan mudah dimengerti

Cara Menggunakan Font Awesome pada HTML

Letakkan kode berikut ini dibawah <head> yang merujuk ke Font Awesome

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

Membuat Ikon dengan Font-awesome

Anda dapat menempatkan ikon Font Awesome di mana saja menggunakan Awalan CSS fa dan nama ikon. Font Awesome dirancang untuk digunakan dengan elemen inline <i> yang disertai kelas fa (font-awesome).

Contoh :

<i class="fa fa-camera-retro"></i>

Hasilnya :

Penjelasan :
fa adalah nama kelas Font-awesome, wajib ada di setiap pembuatan ikon.
fa-camera-retro adalah nama ikon yang akan dipakai. Daftar nama-nama ikonnya bisa dilihat di dokumentasi font-awesome.

Mengubah 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 :

<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

Mengubah Ikon Agar tetap Lebar

Agar Ikon tetap lebar menggunakan fa-fw untuk mengatur ikon dengan lebar tetap. Bagus untuk digunakan ketika lebar ikon berbeda membuang keselarasan. Sangat berguna dalam hal-hal seperti daftar nav & daftar grup.

Contoh :

<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>

Hasilnya :

Rumah
Perpustakaan
Aplikasi
Pengaturan

Membuat Ikon untuk List

Untuk menggunakan ikon font-awesome untuk List, kita bisa menggunakan class fa-ul dan fa-li.

Contoh :

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Hasilnya :

List icons
can be used
as bullets
in lists

Memutar Ikon

Untuk memutar ikon, kita bisa menggunakan class fa-rotate-* dan fa-flip-*.

Contoh :

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

Hasilnya :
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Membuat Ikon dengan Animasi

Biasanya dalam web, terdapat ikon yang bisa bergerak. Seperti ikon yang tampil saat loading…

Font-awesome menyediakan dua kelas untuk menggerakkan ikon : fa-spin dan fa-pulse.

Kelas ini biasanya digunakan pada ikon fa-refresh, fa-cog, fa-circle-o-notch dan fa-spinner. Bisa saja kita gunakan pada jenis ikon yang lain, tapi hasilnya akan kurang bagus.

Contoh :

<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 :

Membuat Kutipan Besar untuk Paragraf

Untuk membuat kutipan sebuah atau ikon artikel bisa dibuat dengan mudah menggunaka fa-border dan fa-pull-right atau fa-pull-left

Contoh :

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

Hasilnya :
...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Menggabungkan Ikon

Untuk menumpuk banyak ikon, gunakan fa-stack sebagai induknya, fa-stack-1x untuk ikon berukuran biasa, dan fa-stack-2x untuk ikon yang lebih besar. fa-inverse digunakan sebagai warna ikon alternatif. Anda bahkan dapat membuang kelas ikon yang lebih besar untuk menyesuaikan ukuran.

Contoh :

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Hasilnya :
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

Terima kasih sudah mengikuti tutorial ini sampai akhir.
Selanjutnya, Anda bisa berkreasi sendiri dan semoga bermanfaat.