Menggunakan Font Ikon

Menambahkan Font Awesome ke Proyek Anda

Tambahkan link ke Font Awesome dalam elemen <head> HTML proyek Anda. Ini memungkinkan Anda mengakses ikon-ikonnya. Pastikan Anda terhubung ke versi yang terbaru.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Pilih Ikon yang Ingin Anda Gunakan

Kunjungi Font Awesome Icons untuk menelusuri berbagai ikon yang tersedia. Pilih ikon yang sesuai dengan proyek Anda.

Menambahkan Ikon ke HTML

Tambahkan elemen dengan kelas CSS "fas" (untuk ikon solid) atau "far" (untuk ikon kontur) dan kelas CSS spesifik untuk ikon yang Anda pilih. Misalnya:

<i class="fas fa-heart"></i>

Atur Ukuran dan Warna Ikon

Anda dapat mengatur ukuran ikon menggunakan kelas CSS "fa-xs", "fa-sm", "fa-lg", "fa-2x", atau sesuaikan ukuran dengan CSS kustom Anda sendiri. Juga, Anda dapat mengganti warna ikon menggunakan CSS.

Contoh CSS untuk Ukuran dan Warna:

/* Mengubah warna ikon menjadi merah */
.fa-heart {
  color: red;
}

/* Mengatur ukuran ikon menjadi 2x */
.fa-heart {
  font-size: 2em;
}

Selesai!

Anda sekarang sudah berhasil menambahkan dan mengubah ikon dengan Font Awesome dalam proyek CSS Anda. Anda dapat menyesuaikan tampilan ikon sesuai dengan kebutuhan desain Anda.

PREVIOUS
NEXT