Cara Membuat Icon Menu Navigasi Blog

Halo Tekners, bertemu lagi kita pada artikel saya yang baru ini, hari ini saya akan membahas Cara Membuat Simbol pada Menu Navigasi Blog  ya saya sebenarnya membuat artikel ini karna suatu alasan.

Disaat saya sedang mengotak-atik blog saya. Saat saya melakukan 'edit html' pada template, saya ingin menambahkan maupun mengganti simbol-simbol yang ada pada menu seperti gambar Header diatas artikel ini.

Bagi seorang Front-End Web Developer terkadang untuk mempercantik tampilan sebuah website membutuhkan pemanis berupa icon. Dengan adanya icon-icon akan membuat visualisasi dari sebuah web menjadi tampak lebih segar dan tentunya lebih indah. Namun masalahnya adalah, membuat icon itu bukan sebuah hal yang gampang. Diperlukan skill khusus untuk mendesign icon.

Untuk icon khusus yang merupakan ciri khas dari sebuah produk atau brand, tentu kita harus mendesainnya sendiri. Namun bagaimana dengan icon-icon standar yang memang selalu digunakan? Haruskah kita membuatnya juga satu persatu? Jawabannya tentu saja tidak, kita bisa menggunakan tools Font Awesome dan langsung menggunakan script untuk icon tersebut, tetapi disini saya akan membahas yang menggunakan script.

1. Pertama buka Template pada dashboard blogger agan, Kemudian pilih edit HTML

2. Cari 'fa' hingga ketemu hasil atau coding seperti di gambar dibawah ini, agan bisa menggunakan ctrl+f untuk mempermudah proses pencarian.

3. Bila dilihat pada script('fa fa-th-list f') difoto tersebut (foto atas), maka tampilan icon/simbol yang muncul pada menu akan seperti digambar berikut:

4. Nah disini saya akan mencoba merubah Icon tersebut menjadi icon 'Home', maka script icon tersebut akan saya akan ubah seperti gambar berikut:

5. Bisa dilihat bahwa ane hanya mengubah yang tadinya 'fa fa-th-list f' menjadi 'fa fa-home fa-fw'. Maka tampilannya juga akan berubah eitt jangan lupa save template dulu ya gan,

6. Baru deh refresh blog ente maka icon yang tadinya berupa list sekarang akan menjadi icon home sesuai keinginan saya, seperti gambar berikut:

Selesai, Cara ini sebenarnya work untuk segala icon (fa) yang ada di edit html agan nah agan harus tau script-script membuat icon tersebut, disini saya memberikan sedikit script tersebut semoga bermanfaat

<i class="fa fa-camera-retro"></i> fa-camera-retro
dan untuk memperbesar icon tersebut begini:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Lanjut ke icon yg lain:

<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>
<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
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-square fa-stack-2x"></i>

<i class="fa fa-camera fa-stack-1x"></i>
silahkan dicoba aja ya gan satu-satu hehehe

jika ada pertanyaan silahkan ketikan dikolom komentar dibawah, Admin akan menjawab jika ada waktu luang tapi tenang admin akan menjawab secepatnya kok. Share artikel ini jika berguna ya gan. karna sebaik2nya ilmu adalah ilmu yang berguna :) 

Terima Kasih, dan tolong jika anda mengutip artikel ini Cantumkan sumbernya ya :)  

Share this post