Cara Menambah Icon Pada Menu Navigasi Blog dengan fontawesome
2/12/2019
Add Comment
Kadangkala ketika kita baru memperbarui blog atau mungkin baru membuat blog, tampilan blog tersebut polos dan tidak menarik bukan? Entah itu karena warna template tersebut atau mungkin tata letak entah itu menu, widget atau mungkin footer blog. Tentu saja banyak solusi untuk mengatasi itu entah itu mengganti template , merubah / mengedit template tersebut, tetapi disini saya hanya ingin berbagi cara untuk mempercantik tampilan saja dengan memberi icon pada menu navigasi saja, jadi pastikan sudah menentukan template mana dan tidak akan mengganti ganti template.
Apa Itu fontawesome?
fontawesome adalah website yang menyediakan icon icon yang bisa kita gunakan fontawesome sering digunakan oleh para pembuat template untuk menambahkan macam-macam icon agar template yang dibuat menjadi lebih menarik dan lebih cantik. Berikut contoh beberapa icon yang terdapat di fontawesome.
Pada fontawesome terbagi dalam dua versi gratis dan premium / pro, tentu saja untuk yang premium lebih baik dari segi tampilan atau macam macam ragamnya.
1.
Hal pertama pastkan kita sudah login dahulu, kemudian pilih menu template dan
klik edit HTML. Selanjutnya copy
kode di bawah ini,
<! DOCTYPE html>
<html>
<head>
<title> Ini Adalah Halaman Web Sederhana </title>
</head>
<body>
<h1> Ini adalah Judul </h1>
<p> Ini adalah Paragraf </p>
</body>
</html>
Note ! : Sesuaikan Versi fontawesome dengan font yang akan dipilih, Tiap -tiap versi beda cara penulisan untuk lebih lengkapnya kunjungi link berikut : https://fontawesome.com/start
Kemudian
pastekan kode tersebut tepat diatas kode </head>
pada template tersebut.
Untuk
mencari kode </head> gunakan ctrl+f untuk mempercepat pencarian.
2.
Jika sudah menyimpan hasil perubahan template tersebut, cari icon mana yang
ingin ditampilkan.
Kunjungi
website https://fontawesome.com/icons/
untuk
memilih pilihan icon yang terdapat di fontawesome
yang sesuai dengan navigasi blog yang akan kita beri icon.
untuk mencari icon ketik pada pencarian icon apa yang ingin ditampilkan
untuk mencari icon ketik pada pencarian icon apa yang ingin ditampilkan
3.
Untuk menampilkan icon tersebut, pertama pilih copy kode icon tersebut lebih
kurang seperti ini
<i class='fa fa-nama icon yang dipilih'>
Contoh : <i class='fa fa-user'>
Kemudian
Letakkan kode icon yang dipilih sebelum nama menu navigasinya.
Lihat
contohnya dibawah ini.
<li><a href='#'><i class='fa fa-user'/>About</a></li>
Ket :
<a href='#'> =
merupakan link navigasi
<i class='fa fa-user'/> =
merupakan kode icon yang ditampilkan
About = nama navigasi
Untuk ganti icon rubah 'fa fa-user' sesuai kode icon yang
akan mengganti
Misal 'fa fa-user' yang di ganti " user
" untuk mengganti icon tersebut.
4. Selesai
Mudah bukan, singkat tapi hasilnya memuaskan
Bagaimana
cara agar ikon berjarak dengan tulisannya/ nama menu?
Tinggal beri spasi
atau tab sebelum judul navigasinya
Contoh
:
Sebelum
<li><a href='#'><i class='fa fa-user'/>About</a></li>
Sesudah
<li><a href='#'><i class='fa fa-user'/>
About</a></li>
Contoh Hasil :
Contoh Hasil :
Demikian artikel mengenai cara menambahicon pada menu navigasi blog, semoga artikel ini membantu dalam mempercantik
blog
0 Response to "Cara Menambah Icon Pada Menu Navigasi Blog dengan fontawesome"
Post a Comment