Home / WordPress / Cara Membuat Menampilkan Font Awesome Di Post Meta WordPress

Cara Membuat Menampilkan Font Awesome Di Post Meta WordPress

Cara Membuat Menampilkan Font Awesome – Demi menjaga kecepatan loading blog maka suatu pilihan yang tepat jika kita dalam membuat ikon blog menggunakan Font Awesome. Ikon yang disediakan oleh Font Awesome tersedia banyak pilihan. Seperti ikon yang dibutuhkan untuk membuat ikon external link, membuat ikon media sosial, membuat ikon post meta, membuat ikon back to top, dan masih banyak lagi. Disini kita akan mencoba membuat serta menampilkan Font Awesome yang biasa tampil dalam Post Meta WordPress.

Baca Juga : Cara Membuat Post Meta Di Bawah Judul Postingan WordPress

Font Awesome adalah kumpulan ikon yang dibuat untuk keperluan desain template website. Karena pada dasarnya ikon ini adalah hanya sebuah font (huruf) maka tentunya tidak akan mengganggu kecepatan loading blog. Hal ini berbeda dengan ikon format gambar seperti format .jpg, format .png, format .gif, dan lain-lain. Selain akan menjaga kecepatan blog, Font Awesome juga akan tetap terlihat baik (tidak pecah) meski kita rubah-rubah ukurannya. Kemudian kita dapat dengan bebas merubah warna Font Awesome sesuai selera menggunakan kode CSS layaknya kita menggunakan Font Face.

Cara Membuat Dan Menampilkan Font Awesome Di Post Meta WordPress 0

Ketika artikel ini dibuat, versi Font Awesome sudah mencapai versi 4.4.0 dengan jumlah 585 ikon. Menggunakan Font Awesome merupakan suatu keputusan yang bijak demi untuk menjaga kecepatan loading blog serta bentuk usaha untuk membuat tampilan blog menjadi lebih menarik dan profesional.

Cara Membuat Font Awesome Di Template WordPress

Cara membuat Font Awesome sehingga Font Awesome bisa kita gunakan untuk kepentingan template WordPress, pertama Anda harus mengambil link Font Awesome agar nanti ikon Font Awesome bisa dijalankan. Mengambil link Font Awesome ini hanya sekali saja. Dan nanti jika Font Awesome update, kita hanya cukup mengganti versinya saja. Klik link berikut untuk mengambil link Font Awesome. Salin linknya seperti yang terlihat pada gambar dibawah ini :

Cara Membuat Dan Menampilkan Font Awesome Di Post Meta WordPress 1

Contoh link Font Awesome seperti contoh gambar diatas adalah seperti ini :

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

Kemudian sisipkan link tersebut kedalam file header.php tema WordPress yang kita gunakan. Tepatnya kita tempatkan link Font Awesome dibawah kode <head>.

Namun untuk pengguna WordPress sebaiknya tempatkan link Font Awesome didalam file functions.php. Dengan catatan kita harus memodifikasi terlebih dahulu link Font Awesome. Link Font Awesome jika kita ingin menempatkannya didalam file functions.php maka kodenya seperti berikut :

/*------------------------------------------------------------------*/
/* Font Awesome
/*------------------------------------------------------------------*/
function theme_name_scripts() {
 wp_enqueue_style( 'style-name', '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Selesai sudah proyek kita dalam menempatkan link ekternal Font Awesome. Sekarang kita tinggal memanggil link eksternal tersebut dengan ikon yang kita butuhkan.

Cara Menampilkan Font Awesome Di Post Meta WordPress

Sebagai contoh agar paham cara memasang serta menggunakan Font Awesome, maka selesaikanlah membaca tutorial ini. Misalkan kita ingin menampilkan Font Awesome pada post meta WordPress. Namun sebelum dilanjutkan, sebaiknya Anda pahami dulu apa itu post meta? Simak dulu penjelasannya pada tulisan berikut. Inilah contoh tampilan post meta WordPress yang sudah dipasang ikon Font Awesome :

Cara Membuat Dan Menampilkan Font Awesome Di Post Meta WordPress 2

Sangat jelas jika dalam post meta atau post info diatas menggunakan Font Awesome sebanyak lima ikon. Font ikon admin/user, ikon kategori, ikon komentar, ikon tanggal, dan ikon post view. Lalu bagaimana cara membuatnya?

Setelah Anda selesai menempatkan link eksternal Font Awesome, sekarang Anda tinggal mengambil ikon Font Awesome dengan mengunjungi halaman berikut.

Disana tersedia banyak pilihan ikon yang bisa Anda pilih salah satunya. Sebagai contoh kita akan megambil ikon user untuk ditempatkan di dalam post meta. Maka klik saja gambar ikonnya untuk melanjutkan ke proses selanjutnya.

Cara Membuat Dan Menampilkan Font Awesome Di Post Meta WordPress 3

Dari masing-masing ikon Font Awesome, kita hanya membutuhkan elemen i dengan class fa (Font Awesome). Contoh untuk ikon user kodenya adalah sebagai berikut :

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

Dengan menempatkan kode diatas dimana saja yang kita mau, maka akan tampil ikon user dengan sempurna. Kecuali jika kita ingin melakukan perubahan tertentu seperti merubah warna ikon, merubah ukuran ikon, dan lain-lain maka kita harus membuat kode CSS.

Karena disini kita akan menyelesaikan atau menampilkan ikon Font Awesome pada post meta WordPress, maka selain ikon user ikon yang kita butuhkan adalah sebagai berikut :

Cara Membuat Dan Menampilkan Font Awesome Di Post Meta WordPress 4

Sisipkan kelima elemen i kode ikon Font Awesome tersebut didalam kode post meta WordPress yang terdapat dalam file single.php. Contoh kode post meta atau post info blog ini adalah seperti ini :

<div class="post-info-single"> <span class="theauthor"><?php the_author_posts_link(); ?></span> <span class="thecategory"><?php the_category(', ') ?></span> <span class="thecomment"><a href="<?php comments_link(); ?>"><?php comments_number();?></a></span> <span class="thetime"><?php the_time( get_option( 'date_format' ) ); ?></span> <span class="thepostviews"><?php echo getPostViews(get_the_ID()); ?></span></div>

Maka jika sudah ditambahkan kode ikon Font Awesome hasilnya akan terlihat seperti berikut :

<div class="post-info-single"><i class="fa fa-user"></i> <span class="theauthor"><?php the_author_posts_link(); ?></span> <i class="fa fa-bookmark"></i> <span class="thecategory"><?php the_category(', ') ?></span> <i class="fa fa-comments"></i> <span class="thecomment"><a href="<?php comments_link(); ?>"><?php comments_number();?></a></span> <i class="fa fa-calendar"></i> <span class="thetime"><?php the_time( get_option( 'date_format' ) ); ?></span> <i class="fa fa-eye"></i> <span class="thepostviews"><?php echo getPostViews(get_the_ID()); ?></span></div>

Simpan perubahan dan lihat hasilnya ! Sukses atau tidak ? Demikian panduan Cara Membuat Menampilkan Font Awesome Di Post Meta WordPress. Silakan Anda berkreasi lagi dengan menempatkan ikon Font Awesome pada elemen-elemen lainnya. Sekarang Anda tinggal mencari ikon yang lain lalu ambil kode elemen i class fa dan tempatkan didalam template WordPress.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

Leave a Reply

Your email address will not be published. Required fields are marked *