Cara Menggunakan Font Awesome Pada Website WordPress
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.
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 di 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 Tema WordPress.
Cara Tambahkan Icon Font Awesome di 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="https://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', 'https://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.
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.
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 :
&amp;amp;lt;i class="fa fa-download" aria-hidden="true"&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;
Menjadi :
&amp;amp;lt;i class="fa fa-download fa-2x" aria-hidden="true"&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;
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.
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.
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 Facebook+.
Daftar isi Tutorial WordPress Terlengkap GratisRelated Posts
-
Cara Menghasilkan Uang Dengan Program Afiliasi
-
Cara Optimasi Situs WordPress untuk Pencarian Suara
-
Cara Mudah Mengganti Gravatar Bawaan di WordPress
-
Cara Memasang Iklan AdSense Matched Content di Related Post WordPress
-
Cara Menambahkan Tombol Login Google Satu Klik di WordPress
-
Cara Memasang Attachments atau Lampiran di Komentar WordPress
Register Now: TOP 10 Hosting
Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals
About The Author
John Mamad
Media belajar WordPress Indonesia yang gratis dan lengkap dengan konten yang mudah dipahami. "Hormatilah orang tuamu dan perbanyaklah membaca Sholawat"
Cara menggunakan child tema ada tutorialnya tidak??