Cara Menggunakan Font Awesome

4.97/5 (32)
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

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

5 tanggapan untuk “Cara Menggunakan Font Awesome

  • 14 Juli 2018 pada 2:06 AM
    Permalink

    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.

    Balas
    • 9 Agustus 2018 pada 1:06 AM
      Permalink

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

      Balas
  • 3 Agustus 2018 pada 12:56 AM
    Permalink

    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.

    Balas
    • 3 Agustus 2018 pada 6:05 AM
      Permalink

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

      Balas
  • 11 Agustus 2018 pada 7:18 PM
    Permalink

    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.

    Balas

Tinggalkan Balasan

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