27 November 2016

Memasang Font Awesome & Iconnya Di Website

Sebelumnya sudah pada tahu kan apa itu Font Awesome? Font Awesome adalah sekumpulan icon yang telah dibuat sedemikian rupa dengan menggunakan sistem Font Icon yang memungkinkan kita untuk merubah warna dan ukuran font dengan menggunakan CSS tanpa takut Icon menjadi Pecah-pecah dan tantunya lebih ringan daripada Image Icon. Font Awesome memberikan kemudahan dalam menggunakan icon untuk website dalam bentuk vector. Font Awesome ini salah satu karya Dave Gandy

Font Awesome ini sudah di pasang pada jutaan halaman website. Baik itu website yang ternama maupun belum. Dengan menambahkan Font Awesome di Website, akan mempercantik tampilan halaman web. Untuk memasang Font Awesome ini mudah sekali teman-teman, berikut adalah rangkuman caranya.

Memasang Font Awesome Di Website
  • Pertama, buka editor HTML website kamu. Editor disini adalah alat untuk mengedit dan memodifikasi sekumpulan kode yang ada pada Website kamu.
  • Lalu, cari lah kode <head> atau </head>
  • Jika sudah ditemukan, letakan kode di bawah ini sesudah kode <head> atau sebelum kode </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
  • Terakhir, Simpan perubahan tersebut

Menampilkan Icon Font Awesome Di Website
  • Masih di editor HTML website kamu
  • Sisipkan kode Icon font awesome sesudah kode <body> atau sebelum kode </body>
Untuk contoh pemasangan nya, disini saya memasang Icon Facebook dengan kode facebook-official Maka jika saya pasangkan akan menjadi <i class="fa fa-facebook-official"></i>
  • Jika sudah, Simpan perubahan tersebut

Setiap kamu ingin menampilkan Font awesome ini yang perlu diperhatikan yaitu kode pemasangannya. kodenya pun banyak sekali dan bisa temen-temen lihat di http://fontawesome.io/icons/ Jadi yang perlu temen-temen perhatikan itu kode di akhir fa fa- atau jika di tuliskan seperti <i class="fa fa-kode"></i> Nah temen-temen tinggal ganti saja kode yang saya warnai merah tersebut.

Buka Komentar


EmoticonEmoticon