Cara Menggunakan Font Awesome di Postingan WordPress Self Host

Laman statik pada sebuah situs web biasanya banyak dimanfaatkan untuk keperluan menampilkan profil diri. Bagi kalangan professional, kebutuhan desain halaman situs yang menarik menjadi kebutuhan khusus. Berbagai elemen harus dipertimbangkan untuk ditambahkan. Kebutuhan akan ikon misalnya.

Font Awesome dapat membantu Anda dalam menentukan ikon-ikon yang menarik untuk ditampilkan di laman statik situs Anda. Sebelum itu, tentu Anda harus menyiapkan berbagai hal. Memilih plugin yang tepat dan memahami kode dasar HTML atau kode pendek (shortcode) WordPress.

Berikut ini langkah-langkah menggunakan Font Awesome untuk konten WordPress Anda. Khusus pengguna WordPress self host yang sudah menggunakan editor modern, Gutenberg.

Pasang Plugin

WordPress tanpa plugin itu ibarat Aku tanpa Kamu. Sepi, hampa dan ada yang kurang. Untuk itu diperlukan komponen khusus untuk melengkapinya.

Ngomong-ngomong masalah plugin, ada banyak sekali plugin yang menyediakan fitur untuk kebutuhan ikon, bahkan satu plugin bisa membawa dukungan banyak platform ikon sekaligus. Tapi, Font Awesome saja sudah cukup kok.

Plugin Font Awesome bisa Anda dapatkan secara cuma-cuma. Meskipun harus mengorbankan sedikit paket data.

Jika sudah memiliki WordPress self host, Anda cukup masuk ke dasbor WordPress dan pergi ke Plugin > Tambah Baru > pada kolom pencarian ketik Font Awesome.

Tampilan hasil pencarian plugin FontAwesome di dasbor WordPress

Pilihlah plugin yang ditawarkan oleh pengembang aslinya, yaitu Font Awesome. Anda dapat menemuinya dibagian keterangan singkat tentang plugin terkait. Klik Pasang Sekarang dan Aktifkan.

Tampilan plugin FontAwesome setelah diaktifkan

Menggunakan Ikon Font Awesome di WordPress

Ada dua metode yang digunakan untuk menggunakan ikon dari Font Awesome di WordPress. Kode HTML atau memanfaatkan fitur WordPress yang bernama kode pendek. Metode yang manapun, sama-sama memerlukan sedikit pengetahuan tentang HTML.

Saya akan mencoba menggunakan kedua metode tersebut, selanjutnya, terserah pada Anda mau menggunakan metode mana yang menurut Anda lebih mudah digunakan.

Terlebih dahulu, buatlah sebuah halaman atau postingan. Kemudian ikuti langkah di bawah ini, sesuai dengan metode yang Anda sukai.

Metode Kode HTML

Klik ikon tambah blok atau gunakan blok kosong yang sudah ada. Kemudian pilih Opsi selanjutnya dari blok yang Anda gunakan saat ini lalu pilih Sunting sebagai HTML.

Salin dan tempel-lah kode di bawah ini, sebagai contoh.

<i class="fa fa-whatsapp fa-lg"></i> Ikon Whatsapp

Pada bagian fa-whatsapp silahkan sesuaikan dengan ikon yang Anda kehendaki. Silahkan lihat di tautan ini untuk informasi ikon lebih lengkap. Pada opsi lainnya, seperti fa, mohon jangan diganti, biarkan seperti itu atau Anda bisa baca informasi di tautan ini untuk mengetaui penggunaannya. Untuk opsi fa-lg bisa Anda sesuaikan, karena opsi ini digunakan untuk memperoleh ukuran tertentu, silahkan baca tautan ini untuk membaca informasi lebih lanjut mengenai ukuran ikon.

Metode Kode Pendek

Sebenarnya, penggunaan kode pendek ini hampir sama dengan struktur kode HTML, tetapi penggunaanya harus sesuai dengan fungsinya. Berikut kode pendek penggunaan ikon Font Awesome.

[icon name="whatsapp" class="fa fa-lg"][/icon] Ikon Whatsapp

Meskipun namanya kode pendek, kalau dilihat-lihat ternyata struktur kodenya masih lebih panjang sih. Pengertian masing-masing opsi juga sama dengan opsi yang ada pada kode HTML. Hanya saja, pada kode pendek ini, opsi name adalah nama ikon (tanpa diawali dengan fa).

Penutup

Demikian tutorial cara menggunakan Font Awesome di WordPress self host. Contoh kode di atas adalah kode-kode sederhana yang nanti bisa Anda kombinasikan dengan kode-kode lain seperti kode untuk membuat hyperlink atau yang lainnya. Jika Anda penasaran bagaimana hasilnya, silahkan kunjungi situs web pribadi saya di umam.my.id.

Sumber

Instalasi Font Awesome di WordPress, tersedia di https://fontawesome.com/how-to-use/on-the-web/using-with/wordpress

Laman Plugin Font Awesome di Wordpress (org), tersedia di https://wordpress.org/plugins/font-awesome/