Cara Menggunakan Font Awesome Terbaru


Cara Menggunakan Font Awesome – Membuat website yang terlihat menarik merupakan tantangan tersendiri bagi web developer. Sebab untuk menghasilkan sebuah web yang ‘indah’ dipandang mata diperlukan proses yang tak sederhana.

Akan tetapi seiring berjalannya waktu kita dimudahkan dengan hadirnya berbagai framework. Salah satunya adalah Font Awesome. Apa itu Font Awesome?

Pada kesempatan ini kami jelaskan seputar Font Awesome beserta kelebihannya. Tidak hanya itu saja, yang terpenting kami juga jelaskan bagaimana cara menggunakan Font Awesome. Langsung saja simak artikel berikut.

Pengertian Font Awesome

Font Awesome adalah framework CSS yang dibuat khusus untuk membuat ikon ataupun simbol. Karena fungsinya ini Font Awesome banyak digunakan oleh developer. Sebab mereka tidak perlu repot-repot membuat ikon sendiri.

Dengan Font Awesome kita cukup memanggilnya ke dalam website, lalu berbagai ikon yang menarik bisa langsung kita gunakan. Tanpa perlu kita buat ikon-ikon sendiri secara manual. Sangat mudah bukan?

Baca juga: Cara Menggunakan Bootstrap

Kelebihan Font Awesome

Font Awesome tentu saja mempunyai beberapa kelebihan yang membuatnya diminati banyak developer. Berikut adalah beberapa kelebihan framework Font Awesome:

  1. Bisa diunduh secara gratis, sehingga siapa saja bisa menggunakan Font Awesome tanpa perlu mengeluarkan biaya sepeserpun.
  2. Memiliki banyak ikon yang menarik sehingga cocok untuk berbagai jenis blog, mulai dari blog personal hingga website profesional.
  3. Bisa bekerja dengan berbagai macam framework CSS lainnya, termasuk Bootstrap.
  4. Kompatibel dengan banyak jenis browser.
  5. Font Awesome mempunyai dokumentasi yang sangat lengkap.
  6. Proses instalasi bisa dilakukan dengan mudah dan tidak memerlukan javascript tambahan.
  7. Penggunaan Font Awesome juga mudah. Kita hanya perlu menambahkan ikon pada class HTML atau unicode pada CSS pseudo-elements.
  8. Ringan dan tak memberatkan loading blog.

Menambahkan Font Awesome

Sebelum kita bisa menggunakan Font Awesome, kita perlu mendownload file tersebut. Kunjungi website resminya di https://fontawesome.io/ untuk mengunduh.

Jika sudah selesai, ekstrak file yang sudah terunduh tadi ke dalam direktori projects yang kita buat. Biasanya file ini diletakkan di direktori assets.

Supaya memudahkan kita saat melakukan konfigurasi, silakan ganti nama direktori menjadi lebih simpel. Contohnya dari font-awesome-4.4.0 menjadi font-awesome.

Menyisipkan Font Awesome dalam HTML

Sebenarnya Font Awesome tidak terlalu berbeda dengan framework CSS lainnya dalam hal penggunaan. Kita hanya perlu menghubungkan file CSS ke dalam HTML. Setelah itu kita tinggal memanggil nama-nama class-nya. Silakan simak contoh berikut:

<link rel=”stylesheet” href=”font-awesome/css/font-awesome.min.css” />

Selain itu kita juga bisa menggunakan CDN jika ingin menggunakan Font Awesome tanpa hosting. Caranya adalah sebagai berikut:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css” />

Cara Membuat Ikon dengan Font Awesome

Jika ingin membuat ikon, kita bisa menggunakan tag <i> dan disertai kelas fa (font-awesome). Hal ini berbeda dengan Bootstrap yang biasanya menggunakan tag <span> untuk membuat ikon. Contohnya adalah sebagai berikut:

<i class=”fa fa-coffee”></i>

Keterangan:

  • fa merupakan nama kelas Font Awesome dan harus ada di setiap pembuatan ikon
  • fa-coffee merupakan nama ikon yang ingin digunakan. Anda bisa melihat nama-nama ikon pada dokumentasi Font Awesome.

Mengganti Ukuran Ikon

Perlu diketahui, ukuran ikon yang kita buat dari Font Awesome akan mengikuti ukuran font pada CSS. Akan tetapi kita bisa menggantinya lebih besar ataupun lebih kecil.

Font Awesome menyertakan kelas-kelas untuk menentukan ukuran ikon. Antara lain fa-lg (33% lebih besar), fa-2x, fa-3x, fa-4x, dan fa-5x. Contohnya adalah sebagai berikut:

<i class=”fa fa-coffee fa-2x”></i>

Mengganti Warna Ikon

Font Awesome pada dasarnya mengikuti warna teks dari suatu elemen. Dengan kata lain jika ingin mengganti warna ikon Font Awesome kita juga harus mengganti warna teksnya. Contohnya silakan simak di bawah ini:

<p style="color: orange">
  Teks ini berwarna orage dan juga ikon ini 
  <i class="fa fa-coffee"></i> berwarna orange
</p>

Sehingga hasilnya akan seperti berikut:

Akan tetapi kita bisa mengganti warna ikonnya saja. Caranya adalah dengan memberikan warna kepada ikon tersebut. Simak kode di bawah ini:

<p>
  Teks ini berwarna hitam dan ikon ini 
  <i class="fa fa-coffee" style="color: orange"></i> berwarna orange
</p>

Jika ingin mengubah warna ikon menjadi putih atau kebalikan dari hitam, gunakan class fa-inverse.

Menggabungkan Beberapa Ikon Sekaligus

Dengan Font Awesome kita juga bisa menggabungkan beberapa ikon sekaligus menjadi satu. Misalnya kita ingin membuat logo terminal. Maka kita perlu menggabungkan ikon square atau kotak dengan ikon terminal.

Untuk melakukannya kita membutuhkan elemen yang tujuannya membungkus ikon yang akan digabungkan. Elemen tersebut harus menggunakan class fa-stack. Silakan simak contoh berikut ini:

<span class="fa-stack">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>

Melihat script di atas kita memadukan ikon fa-square dengan fa-terminal. Yang perlu diingat, ikon yang ditulis lebih dulu akan menjadi yang paling bawah dalam tumpukan (stack) ikon.

Selain itu kita juga bisa menjumpai class fa-stack-1x yang merupakan ukuran ikonnya. Sama seperti fa-lg, fa-2x dan lain-lain.

Dari hasil penggabungan tersebut didapatkan ikon seperti di bawah ini:

Membuat Ikon untuk List

Dengan menggunakan Font Awesome kita juga bisa membuat ikon untuk list. Caranya adalah dengan menggunakan class fa-ul dan fa-li. Contohnya silakan simak di bawah ini:

<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 adalah sebagai berikut:

Memutar Ikon

Kita juga bisa menggunakan Font Awesome untuk memutar ikon. Caranya dengan memanfaatkan class fa-rotate-* dan fa-flip-*. Contohnya bisa dilihat di bawah ini:

<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

Dari kode di atas hasilnya adalah seperti ini:

Membuat Ikon dengan Animasi

Font Awesome juga memungkinkan penggunanya untuk membuat ikon dengan animasi. Tentunya Anda pernah melihat ikon yang bisa bergerak saat mengunjungi suatu web. Contohnya saat website sedang loading.

Ada dua kelas yang berfungsi untuk menggerakkan ikon pada Font-Awesome. Yakni fa-spin dan fa-pulse. Kelas tersebut umumnya digunakan pada ikon fa-refresh, fa-cog, fa-circle-o-notch dan fa-spinner. Meski demikian Anda bisa saja menggunakannya pada ikon lainnya.

Menampilkan Font Awesome di CSS

Kita bisa menampilkan ikon pada Font Awesome di CSS. Caranya adalah lewat CSS pseudo-elements yang diletakkan pada :before (posisi di depan) atau :after (posisi di belakang).

Contohnya kita memiliki tag HTML dengan nama class quote, maka kodenya adalah seperti ini:

.quote:before {

content: “\f109”;

font-family: “Font Awesome 5 Free”;

font-weight: 900;

font-size: 20px;

display: inline-block;

margin-right: 3px;

}

Keterangan:

  • Content: unicode dari Font Awesome yang wajib ditambahkan tanda backslash (\) di depannya.
  • font-family: jenis font yang dipakai. Harus diisi dengan Font Awesome 5 Free.
  • font-weight: harus diisi dengan 900 jika memakai font dengan jenis solid. Sedangkan untuk font regular menggunakan 400. Jenis solid atau regular ini bisa dilihat saat Anda memilih ikon.

Hasil dari kode di atas adalah seperti berikut:

Baca juga: Cara Menggunakan Github

Sekian yang dapat kami sampaikan tentang cara menggunakan Font Awesome. Anda bisa membuka dokumentasi Font Awesome untuk mempelajari lebih lanjut seputar framework CSS ini. Atau Anda juga bisa mencari tutorial lainnya di internet, baik di blog caraharian, media sosial atau Youtube.



Loading...

Leave a Comment