Download Now Download Themes Gratis WordPress Responsive!

Cara Menggunakan Font Awesome Pada Website WordPress

Font Awesome adalah jenis font yang berbeda dengan jenis font yang sering kita jumpai, font awesome ini berbentuk icon bukan untuk text atau tulisan pada umumnya. Sejak pertama hadir, font awesome ini sangat di apresiasi dan disukai oleh semua kalangan pengguna untuk digunakan sebagai bahan pelengkap untuk mempercantik website.

font-awesome-wordpress

Dengan hadirnya font Awesome ini kita menjadi tidak memerlukan icon dalam bentuk gambar lagi, tapi cukup dengan menambahkan sedikit potongan kode saja kita sudah bisa menampilkan icon-icon yang sangat cantik. Jika Anda tertarik untuk menggunakannya pada website atau blog WordPress Anda, maka pada artikel ini saya akan menunjukkan cara untuk menggunakan font Awesome pada website WordPress.

Apa itu Font Awesome?

Seperti yang sudah saya jelaskan diatas bahwa Font Awesome bekerja dengan prinsip yang sama pada kebanyakan font tapi font awesome dibangun dengan ikon bukan terdiri dari set gambar. Dengan menggunakan font awesome ini Anda dapat menampilkan icon dengan berbagai macam ukuran yang bisa disesuaikan dengan mudah sekaligus Anda dapat memanipulasi icon tersebut seperti font lainnya yaitu dengan mengubah warna, menambahkan animasi, dan banyak lagi. Dan juga perlu Anda ketahui bahwa font awesome ini dapat bekerja pada hampir semua browser.

Font Awesome saat ini sudah mempunyai font sebanyak 634 icon yang berbeda yang dapat Anda tambahkan di mana saja di situs website WordPress Anda. Karena font awesome kompatibel pada setiap theme WordPress.

Baca : 30+ Font Sans Serif Terbaik Untuk Heading Website

Cara Tambahkan Icon Font Awesome pada WordPress secara Manual

Sangat mudah untuk menambahkan Font Awesome ke WordPress dengan cara manual ini. Pertama, Anda perlu menambahkan baris kode stylesheet dari Font Awesome di bagian header dari tema WordPress Anda. Kemudian, Anda perlu menemukan nama sebenarnya dari ikon yang ingin Anda gunakan dan memasukkannya dengan potongan kode tersebut.

Berikut cara detail untuk melakukan kedua hal diatas:

Langkah pertama adalah menambahkan kode stylesheet Font Awesome ke header.php theme WordPress Anda. Berikut adalah code yang harus Anda tambahkan ke header.php :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Kode ini membawa di Font Keren stylesheet dari Bootstrap CDN. Anda juga bisa mendapatkan stylesheet langsung dari Font Awesome, tetapi tidak membuat perbedaan nyata.

Silahkan untuk masuk ke menu Appearance » Editor, dan cari file yang bernama header.php dan copy kode diatas dan paste di bawah tag <head>.

Atau jika Anda ingin cara berbeda, Anda bisa menambahkan kode dibawah ini pada file functions.php pada tema WordPress.

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
 
    wp_enqueue_style( 'load-fa', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
 
}

Pastikan Anda menggunakan child theme, sehingga penambahan kode pada tema Anda tidak akan hilang jika suatu saat tema Anda mendapatkan update.

Menggunakan Font Awesome Icons

Setelah Anda menambahkan kode stylesheet pada tema Anda, sekarang Anda sudah bisa untuk mencoba menggunakan icon-icon dari font awesome tersebut dimanapun tempat yang Anda inginkan pada situs WordPress Anda.

Untuk menemukan daftar icon secara lengkap, silahkan mengunjungi situs resmi Font Awesome dan klik menu “Icon” lalu cari setiap ikon yang ingin Anda gunakan, atau bisa mengetikkan keyword pada kolom search. Misalnya, jika Anda ingin menggunakan icon “Download”, klik icon download tersebut.

font-awesome-wordpress-icon

Setelah Anda klik pada icon yang Anda inginkan, Anda akan melihat icon di tampilan dalam berbagai ukuran. Dan juga Anda akan melihat sebuah kode dari icon tersebut.

font-awesome-wordpress

Untuk menggunakannya Anda harus menyalin semua kode tersebut pada setiap icon yang ingin Anda gunakan. Kemudian, Anda dapat memasukkan kode tersebut dimana saja yang ingin Anda tampilkan. Sebagai contoh jika Anda ingin menggunakannya pada postingan Anda. Paste kan kode tersebut pada Editor WordPress, tapi paste kan kode tersebut pada editor Text, setelah itu baru Anda pindah ke Editor Visual. Dan nanti Anda akan melihat hasilnya seperti gambar dibawah ini.

Pada gambar diatas terlihat icon tampil dengan ukuran yang kecil. Anda bisa mengubah ukuran icon font awesome dengan sangat mudah hanya menambahkan sedikit kode untuk ikon. Misalnya, untuk membuat ikon tampil dua kali lebih besar, Anda hanya perlu menambahkan kode “fa-2x” ke class icon. Sebagai contoh lihat kode dibawah ini :

Kode Default :

<i class="fa fa-download" aria-hidden="true"></i>

Menjadi :

<i class="fa fa-download fa-2x" aria-hidden="true"></i>

Berikut daftar kode yang dapat Anda gunakan untuk mengatura ukuran icon Font Awesome:

  • fa-lg  : meningkatkan ukuran sebesar 33%
  • fa-2x : dua kali lipat ukuran
  • fa-3x : tiga kali lipat ukuran
  • fa-4x : empat kali lipat ukuran
  • fa-5x : lima kali lipat ukuran

Selain hal diatas, dengan font awesome ini Anda juga dapat melakukan hal-hal keren lainnya seperti penggunaan Font ikon Awesome seperti poin-poin, menambahkan animasi, dan banyak lagi. Anda bisa melihat dokumentasi atau tutorial lebih lengkap mengenai kode yang harus ditambahkan pada situs resmi Font Awesome.

Baca : 30+ Font Pilihan Terbaik untuk Desain [Gratis]

Cara Tambahkan Icon Font Awesome pada WordPress Dengan Plugin

Cara kedua dengan menggunakan plugin ini tentu merupakan cara yang lebih mudah dan praktis lagi. Jika Anda tidak suka cara manual, Anda bisa menggunakan Font Awesome dengan plugin Better Font Awesome Icons. Banyak sebenarnya plugin lain yang bisa Anda gunakan untuk menggunakan font Awesome, namun plugin yang saya pilih ini lebih sering mendapatkan update daripada plugin lain.

Untuk menggunakannya silahkan untuk menginstal dan mengaktifkan plugin Better Icon Font Awesome. Jika Anda belum tahu mengenai cara install plugin, silahkan baca terlebih dahulu artikel saya tentang » Panduan Lengkap Cara Install Plugin WordPress.

Setelah plugin diaktifkan maka Anda akan melihat menu baru ditambahkan bernama Better Font Awesome. Jika Anda klik menu tersebut Anda akan melihat beberapa petunjuk cara menggunakan plugin dan Anda tidak perlu melakukan konfigurasi apa-apa pada plugin ini.

Untuk menambahkan ikon pada postingan Anda, Anda bisa menggunakan metode yang sama dengan yang saya tunjukkan pada cara manual dibagian atas, atau Anda dapat menggunakan shortcode. Keuntungan menggunakan shortcode adalah bahwa Anda tidak perlu perlu beralih ke tab “Text” editor Anda.

hasil-font-awesome

Format shortcode yang perlu Anda gunakan adalah:

[icon name="NAME"]

Anda tinggal mengganti “NAME” dengan nama dari icon yang akan Anda gunakan. Dan jika Anda ingin mengubah ukuran ikon Anda melalui shortcode, Anda hanya tinggal menambahkan tag class dengan ukuran yang tepat Anda ingin seperti ini:

[icon name="NAME" class="fa-2x"]

Semua pilihan ukuran yang sama dari contoh-contoh tadi akan bekerja dengan shortcode.

Baca : 15+ Font Gratis yang Digunakan Pada Logo Brand Terkenal

Diatas adalah dua cara yang berbeda untuk menambahkan Font Awesome ikon untuk situs WordPress Anda. Saya lebih baik menyarankan untuk menggunakan cara manual daripada menggunakan plugin. Karena cara manual sangat sederhana untuk Anda terapkan daripada harus menambah plugin baru. Semoga artikel ini bermanfaat dan selamat menambahkan icon font awesome ke situs WordPress Anda. Selamat mencoba 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Must Read...!
Theme WordPress Clarina Responsive Free

Clarina adalah Theme Wordpress Responsive Gratis yang bisa Anda gunakan untuk membangun situs bisnis....

Theme WordPress Premium Terbaik & Termurah

Bagi anda pecinta Wordpress tentunya Anda tidak lepas dari pemburuan theme untuk mempercantik situs...

Close