fbpx
BlogKiply Network
Hanya Untuk Berbagi

Cara Menggunakan Font Awesome 5 Terbaru

0 18

Get real time updates directly on you device, subscribe now.

Cara Menggunakan Font Awesome 5 Terbaru
Cara Menggunakan Font Awesome 5 Terbaru

Cara Menggunakan Font Awesome 5 Terbaru ~ Bila kamu ingin menambahkan ikon, Font Awesome adalah salah satu pilihan yang harus kamu coba. Dengan Font Awesome, kamu dapat memilih ratusan ikon berkualitas tinggi untuk ditambahkan pada menu navigasi, widget, hook, hingga pos dan laman. Pada artikel kali ini, kita akan belajar cara memasang dan menggunakan Font Awesome pada website WordPress.

Gambar adalah elemen penting yang sudah sangat lumrah digunakan pada hampir semua website. Tidak hanya untuk mempercantik website, penggunaan gambar juga digunakan untuk mempertegas atau bahkan mengganti peran elemen website lainnya. Contoh yang paling jelas dapat kamu lihat pada beberapa website yang menggunakan gambar pada menu navigasi, search bar, hingga gambar loading.

Apa Itu Font Awesome?

Font Awesome adalah toolkit dan ikon font yang dibuat dalam bentuk CSS. Kita dapat dengan mudah menggunakan font yang luar biasa ini, dengan cukup untuk memberikan tag HTML dan kami memberikan kelas yang kemudian nama kelas akan memanggil ikon font yang luar biasa.

Apa Fungsi Font Awesome?

Font Awesome adalah kumpulan fon dan ikon berdasarkan CSS dan LESS. Font Awesome dibuat oleh Dave Gandy untuk digunakan dengan bootstrap, dan kemudian dibundel ke bootstrapcdn. Font yang luar biasa memiliki 38% pangsa pasar di antara situs web yang menggunakan skrip FONT pihak ketiga di platform mereka, membuat Font Awesome peringkat kedua setelah Google Font.

Font Awesome dirilis pada 7 Desember 2017 dengan 1.278 ikon. Versi 5 hadir dalam dua paket: Font Awesome Gratis dan Font Awesome Pro (dibayar). Versi gratis (semua rilis pada versi 4 dan versi gratis pada versi 5) tersedia di bawah lisensi Sil buka font 1.1, creative commons atribution 4.0, dan lisensi MIT.

Kelebihan Font Awesome

Penggunaan gambar adalah hal yang lazim dilakukan untuk mempercantik tampilan website. Tidak hanya itu, gambar juga kadang digunakan sebagai elemen pelengkap sebuah web. Seperti pada contoh toolbar WordPress di mana kamu bisa melihat ikon pada setiap menu.

Namun penggunaan gambar pada skenario semacam ini memiliki banyak kekurangan seperti ukuran yang cukup besar (dibandingkan teks) dan tampilan yang menjadi blur ketika diperbesar. Di sinilah penggunaan icon font menjadi solusi yang lebih baik, tidak hanya untuk menampilkan gambar sederhana tetapi juga meningkatkan usability (kegunaan) pada sebuah website[1].

Lalu, apa alasan lain kenapa icon font seperti seperti Font Awesome menjadi pilihan yang lebih baik?

Related Posts
1 of 294
  • Responsif – Tidak seperti gambar pada umumnya, icon font dapat diubah menjadi lebih besar atau lebih kecil tanpa harus mengurangi kualitasnya. Dengan begitu, font akan sangat cocok digunakan pada desain web yang responsif.
  • Mudah dimanipulasi – Sama seperti font pada umumnya, icon font seperti Font Awesome juga dapat dimanipulasi dengan mudah. Beberapa modifikasi bawaan yang dapat kamu gunakan meliputi perubahan ukuran, pemberian border, penambahan efek animasi, hingga penambahan class tertentu agar kamu dapat menggunakan Custom CSS.
  • Meningkatkan kualitas desain web. Berdasarkan penelitian oleh Nielsen Norman Group (NNG)[2], penggunaan icon memilki manfaat seperti:
    • Mudah dikenali dibandingkan teks. Penggunaan secara bersamaan bahkan membuat teks terlihat lebih menonjol.
    • Memiliki makna universal, seperti ikon amplop (envelope) yang umumnya dimaknai sebagai email atau inbox.
    • Menghemat tempat, sehingga cocok untuk desain minimalis.
  • Cross-browser compablity – Icon fonts seperti Font Awesome dapat tampil konsisten pada bermacam-macam browser.
  • Pilihan ikon – Font Awesome memiliki ratusan ikon berkualitas tinggi dalam berbagai kategori yang terus diupdate secara berkala.

Cara Menggunakan Font Awesome

1. Langkah pertama yang harus dilakukan untuk menginstal font yang luar biasa adalah menginstal CSS pemanggil yang ditempatkan di atas kode </body> atau di atas skrip lain yang berada di atas kode </body>

<script async=’async’ defer=’defer’ type=’text/javascript’>
//<![CDATA[
function loadCSS(e, t, n) { “use strict”; var i = window.document.createElement(“link”); var o = t || window.document.getElementsByTagName(“script”)[0]; i.rel = “stylesheet”; i.href = e; i.media = “only x”; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || “all” }) }
loadCSS(“https://awesome.brbs.my.id/css/all.min.css”);
//]]>
</script>

Jika sebelumnya sudah ada, ganti kode pemanggilnya dengan ;

<link rel=”stylesheet” href=”https://awesome.brbs.my.id/css/all.min.css” />

2. Langkah selanjutnya adalah menandai tempat dimana kita akan menampilkan ikon Font Awesome Tersebut :
Ada beberapa teknik dalam menampilkan Font Awesome, antara lain :

  • Bisa ditampilkan dengan menggunakan Syntax <i></i> atau dengan <span></span> ; 'fas' digunakan untuk menampilkan ikon solid, 'far' digunakan untuk menampilkan ikon reguler, 'fab' digunakan untuk menampilkan ikon brands;

<i class=”fab fa-blogger”></i>
<span class=”fab fa-blogger”></span>

untuk warnanya juga bisa dirubah lohhh ;

<span style=”font-size: 3em; color: lightblue;”>
<i class=”fas fa-blogger”></i>
</span>

Demikian tutorial tentang Cara Menggunakan Font Awesome 5 Di Blogger Terbaru ini, semoga bermanfaat.

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.