Cara Membuat Icon di Menu Navigasi Blog Dengan Font Awesome

Bagaimana cara membuat icon di menu navigasi blog agar terlihat keren dan menarik? Ada berbagai cara untuk membuat icon di menu navigasi blog. Salah satu caranya yaitu menggunakan font awesome. Dengan memasang font awesome di blog, Anda dapat membuat atau memasang icon di menu navigasi blog tersebut.

Apa itu Font Awesome?

Font Awesome adalah framework CSS yang berfungsi untuk membuat ikon atau simbol. Font Awesome ini sangatlah membantu bagi para desainer template dan web developer untuk membuat ikon atau simbol. Dan tentunya juga sangat membantu bagi para blogger agar tampilan blog miliknya menjadi lebih menarik dan keren.

Ingat! Font Awesome bukanlah tampilan teks (tulisan), walaupun namanya adalah font. Seperti yang sudah dijelaskan sebelumnya, Font Awesome ini berfungsi untuk membuat ikon, terutama pada blog. Lantas bagaimana cara menggunakan font awesome di blog (khususnya di blogger)?

Cara Mendapatkan Kode Font Awesome

Sebelum menggunakan Font Awesome, Anda harus memasang Kode CSS Font Awesome ke dalam template (tema) blog terlebih dahulu. Untuk cara mendapatkan kode tersebut, Anda bisa ikuti langkah-langkah berikut.

1. Kunjungi situs Font Awesome.
2. Pilih Start to Free. Untuk mendapatkan Font Awesome secara gratis.

Cara Membuat Icon di Menu Navigasi Blog Dengan Font Awesome

3. Anda akan diminta untuk membuat akun terlebih dahulu. Masukkan alamat email Anda, lalu klik tombol Send Kit Code.
4. Setelah itu, email Anda akan diminta untuk konfirmasi. Klik saja tombol konfirmasi yang ada di email Anda.
5. Buat password sesuai keinginan, kemudian klik tombol Set a Password & Continue.
6. Di langkah ini Anda tidak harus mengisinya (opsional). Langsung saja klik tulisan skip di bawah.

7. Konfirmasi email selesai. Anda sudah mendapatkan kode CSS Font Awesome. Klik pada tombol Copy Kit Kode untuk menyalin kode tersebut.

Kode CSS Font Awesome

Cara Memasang Font Awesome di Blogger

Setelah mendapatkan kode CSS Font Awesome, Anda harus memasang (menempatkan) kode tersebut ke dalam template blog. Berikut caranya.

Buka dashboard blogger.
Masuk ke menu Tema.
Klik tombol segitiga terbalik, kemudian pilih Edit HTML.
Letakkan kode Font Awesome di antara kode <head> dan </head>. Bisa sesudah kode <head> atau sebelum kode </head>.
Simpan Perubahan.

Cara Menggunakan Font Awesome di Blog

1. Anda harus memiliki kode ikon yang ingin dipasang. Kode tersebut bisa didapatkan di situs Font Awesome.
2. Tulis kata kunci ikon pada kolom yang sudah disediakan di situs Font Awesome dalam BAHASA INGGRIS. Contohnya adalah home.

3. Pilih ikon yang berwarna tebal untuk ikon yang gratis.
4. Tekan pada kode ikon tersebut dan secara otomatis kodenya akan tersalin.

5. Letak penempatan kode ikon bisa lihat contoh berikut jika di menu navigasi blog.

<li><a href="https://www.rhulweb.com"><i class="fas fa-home"></i> Terbaru</a></li>

Keterangan:

Tulisan berwarna merah adalah url (jika tulisan Terbaru diklik).
Tulisan berwarna hijau adalah kode font awesome (Home).

Berikan spasi sebelum teks agar teks tidak terlalu dekat dengan icon. Contohnya seperti di atas (kode pada langkah nomor 5) dan hasilnya seperti berikut.

Catatan:

Warna icon menyesuaikan warna teks secara otomatis (di template VioMagz). Di template lain mungkin bisa beda.

Penutup

Demikian tutorial terkait cara membuat icon di menu navigasi blog menggunakan Font Awesome agar tampilan blog lebih keren dan menarik. Semoga bermanfaat!!!

Ditulis oleh: Syahrul Hanafi

Rhulweb.com