TIPS JITU NGEBLOG

Tips dan trik jitu ngeblog dari seorang pemula

Search
Your Are in   Home     Blog     Cara Menambahkan Icon pada Menu WordPress

Cara Menambahkan Icon pada Menu WordPress

     Juni 16, 2016   2 Comments

Assalamu’alaikum.

Icon, Apa sih Icon itu? menurut saya sih gambar kecil, mungkin sobat-sobat sudah tau apa itu Icon. Biasanya Icon digunakan pada subjek subjek tertentu pada website, misalnya pada tombol, menu, list dan lain-lain. Nah kali ini saya mau bagi-bagi tips buat teman-teman yang ingin memberi Icon pada bagian-bagian tertentu di situs WordPress sobat terutama pada bagian Menu.

Font Awesome Icon

Font Awesome Icon

Sebenarnya bukan pada bagian menu saja yang bisa diberi Icon, 😀 ya iya lah … hehehe, pada setiap bagian bisa kita beri Icon untuk keperluan tertentu.

Lalu Apa manfaatnya bila memakai Icon?

emm… menurut saya tampilan situs akan lebih bagus, dan berkesan profesional, yah tergantung juga sih… cara penempatan icon tersebut kayak gimana, yang penting jangan terlalu banyak Icon aja 😀 .

Oke mari kita mulai … untuk menambahkan Icon pada menu blog wordpress dengan FontAwasome

Pertama-tama lihat terlebih dahulu Tema / Theme yang sobat pakai sudah didukung dengan FontAwesome atau belum.

Cara cek nya gampang kok Anda tinggal edit pos artikel yang sudah di terbitkan kemudian tambahkan kode :

<i class="fa fa-home"></i> Home

Ingat edit pos nya harus di Teks ya bukan Visual.

Setelah itu Preview / Pratinjau

Kalau munculnya seperti ini :

  Home

Itu berarti theme / tema wordpress Anda sudah mendukung Font Awesome.

Kalau tetap muncul seperti ini :

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

Itu berarti theme / tema wordpress Anda belum mendukung Font Awesome.

Nah jika belum, Anda bisa memakai cara ini

Masuk ke dasbor wordpress sobat, kemudian klik Appearance/Tampilan ==> Editor/Penyuntingan.

menambahkan icon pada menu wordpress1

 

Setelah itu cari nama dan pilih header.php di sebelah kanan yang berisi susunan file-file pada tema Anda.

menambahkan icon pada menu wordpress2

Hosting Murah Hebat

Cari tag pembuka <head>

dan

tag penutup </head>

Copypaste kode di bawah ini di antara tag <head> dan </head>

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

Tidak usah takut salah edit. Oke 😀 . Kalau ada kesalahan silahkan berikan komentar di bawah 😀

Kemudian simpan / update file / perbarui file.

Nah sekarang tema / theme Anda sudah support FontAwesome.

Lalu bagaimana menambahkan Icon nya ?

Sangat mudah, Anda tinggal kunjungi Icon Font Awesome, di situ terdapat banyak sekali Icon-icon yang bisa Anda pakai untuk berbagai keperluan, tinggal di pilih-pilih saja kok.

Baiklah akan aku beri contoh, Misalnya coba kita taruh icon di menu.

Buka menu yang ingin di beri Icon. Appearance/Tampilan ==> Menu

Sangat mudah tinggal Anda tambahkan kode icon dari Font Awesome, contoh saya menambahkan

<i class="fa fa-home"></i>

Sehingga menjadi :

<i class="fa fa-home"></i> Home

lihat gambar di bawah ini.

menambahkan icon pada menu wordpress3

Kemudian simpan, dan lihat hasilnya.

menambahkan icon pada menu wordpress4

nah bisa kan ?

Cukup mudah sekali untuk menambahkan icon pada menu WordPress blog sobat.

Mau menaruh icon pada Pos artikel juga bisa, untuk ukuran dari icon bisa kita sesuaikan sendiri.

Contoh :

<i class="fa fa-users fa-lg"></i> Contoh Icon Users

<i class="fa fa-users fa-2x"></i> Contoh Icon Users

<i class="fa fa-users fa-3x"></i> Contoh Icon Users

<i class="fa fa-users fa-4x"></i> Contoh Icon Users

<i class="fa fa-users fa-5x"></i> Contoh Icon Users

 

maka hasilnya akan seperti ini

 

  Contoh Icon Users

  Contoh Icon Users

  Contoh Icon Users

  Contoh Icon Users

  Contoh Icon Users

Bagaimana mudah bukan, Anda bisa menggunakan Font Awesome icon dengan sesuka hati. Jangan lupa berikan komentar ya 😀 .

Wassalam. 😀 .

About the author

Saya ingin apa yang saya bagikan, bisa bermanfaat bagi pengunjung? terutama teman-teman yang ingin belajar ngeblog dan menghasilkan uang dari ngeblog, saya akan membagikan tips jitu ngeblog dari awal sampai akhir, dan bertahap. Sampai teman-teman dapat menghasilkan uang dari blog. Hanya seorang bloger pemula yang ingin berbagi ilmu kepada teman-teman, dan mari kita sama-sama belajar ngeblog di sini...........!

2 Comments

  1. Kang Nata berkata:

    Wooww,,,bermutu dan bermanfaat sekali artikelnya mas…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

*

You might also reading...

Font Awesome Icon

Cara Menambahkan Icon pada Menu WordPress

Read More