Cara Menggunakan Font Awesome

menggunakan-font-awesome
3.31/5 (55)
Cara Menggunakan Font Awesome
Cara Menggunakan Font Awesome

Cara Menggunakan Font Awesome. – Dalam artikel kali ini kita akan berkenalan, memasang dan Menggunakan Font Awesome. Menurut situs resmi Font Awesome, saat ini sudah ada lebih dari 100,000,000 website yang memakai Font Awesome dalam website mereka. Font Awesome menyediakan banyak sekali ikon – ikon menarik untuk memperindah website kita.

Baca juga: Membuat Halaman Login Menggunakan HTML dan CSS.

Keuntungan Font Awesome

Font Awesome adalah framework CSS untuk membuat ikon. Dengan menggunakan Font Awesome, kita akan lebih mudah saat ingin membuat ikon menarik. Dan juga karena hanya menggunakan teks akan mempercepat loading website kita. Keuntungan menggunakan Font Awesome adalah:

  • Gratis. Sekarang memperbaiki tampilan website akan lebih mudah karena Framework yang satu ini dapat kita gunakan dengan gratis.
  • Perfect on Retina Displays, Font Awesome icons adalah vektors, yang berarti itu akan terlihat sangat baik di tampilan dengan resolusi tinggi.
  • Penggunaanya mudah, Font Awesome mudah di styling dengan css seperti icon color, size, shadow, dan apapun yang memungkinkan dengan CSS.

Menggunakan Font Awesome pada HTML atau Template

Ada beberapa cara untuk menambahkan Font Awesome, namun agar lebih mudah, kita akan menggunakan CDN. Pastekan code dibawah ini di dalam tag head:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Setelah itu pasang ikon kalian inginkan di dalam tag body. Lihat daftar ikon disini.
Contoh penggunaan:
<i class="fa fa-coffee"></i>

Hasilnya:

Mengubah Ukuran Ikon

Font Awesome mempunyai ukuran default untuk ikon mereka. Namun, kita juga bisa mengubahnya dengan memperbesar atau memperkecil sesuai kebutuhan kita.
Misal, diatas saya menggunakan ikon Coffee, kita bisa memperbesar nya dengan mengubah class nya menjadi:

<i class="fa fa-coffee fa-5x"></i>

Hasilnya:

  • Beberapa browser memliki masalah dengan ikon animasi yang menghasilkan efek bergoyang-goyang.
  • Untuk CSS3, animasi belum mensupport pada IE8 – IE9.

Penutup

Update: List ikon bisa dilihat di arc.codelatte.org/cheatsheet

Terima kasih telah mengikuti artikel ini sampai akhir. Sekian artikel tentang Cara Menggunakan Font Awesome, mungkin setelah ini akan saya buat cheatsheet untuk list ikon nya. Apabila masih kurang jelas, silahkan tinggalkan komentar dibawah. Semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.

Please rate this

5 Komentar

  1. Muhammad Balas

    bang saya mau tanya, kalo cara menggunakannya di offline mode gimana bang ? Udah download fontnya tapi gak nemu cara makenya. kalo cara di atas kan harus ada koneksi internet.

    • Abay PenulisBalas

      Bisa pake < link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />. Nanti disesuaikan lagi letak direktori font-awesomenya.

  2. Jake Rigsby Balas

    Hello, Neat post. There is an issue together with your site in web explorer, might
    check this? IE nonetheless is the market leader and a big element of
    folks will pass over your wonderful writing due to this problem.

    • Abay PenulisBalas

      Can you explain in more detail about the issue you mean? Or can contact me at fb.com/abaykandotcom

  3. Jack Bryan Balas

    Hi there! I know this is kind of off topic but I
    was wondering which blog platform are you using for this site?
    I’m getting fed up of WordPress because I’ve had problems with
    hackers and I’m looking at options for another platform.
    I would be great if you could point me in the direction of a good
    platform.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *