Beranda » » Cara Menggunakan Font Awesome di Postingan WordPress Self Host

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
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
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/

Komentar

Posting Komentar

Silahkan tinggalkan komentar Anda di sini.

Postingan populer dari blog ini

Daftar Rekomendasi Repositori Lokal Debian 11 "Bullseye"

-
Gambar
Agustus menjadi bulan yang spesial bagi segenap pengguna, kontibutor dan pengembang inti Debian. Pasalnya, pada bulan ini para pengembang Debian telah mengumumkan perilisan Debian 11 dengan kode nama Bullseye. Selamat datang di ChotibulStudio. Di artikel kali ini, saya akan berbagi daftar rekomendasi repositori lokal Debian 11 "Bullseye". Debian adalah salah satu proyek perangkat lunak bebas yang mempunyai siklus rilis tiap dua tahun sekali. Tiap rilisnya akan mendapatkan dukungan penuh hingga lima tahun. Daftar repositori lokal Debian 11 "Bullseye" Repositori lokal, mengacu pada lokasi layanan repositori yang ada di Indonesia. Bukan hanya dioperasikan oleh instansi atau komunitas yang ada di Indonesia saja, repositori lokal juga mengacu pada lokasi peladennya. Kalau instansi atau komunitasnya asli Indonesia, tapi peladen repositorinya ada di luar negeri, ya sama aja, kan. Berikut ini daftar rekomendasi repositori lokal Debian 11 "Bullseye" yang bisa And...
Baca selengkapnya

Cara Memperbaiki Masalah "KVM virtualisation is configured, but not available" di Proxmox

-
Gambar
Hai!. Selamat datang kembali di ChotibulStudio. Di artikel kali ini, saya ingin mengulas cara memperbaiki masalah " KVM virtualisation is configured, but not avalable " di Proxmox. Masalah tersebut saya temui saat pertama kali belajar dasar-dasar virtualisasi Proxmox dengan bantuan VirtualBox. Seperti halnya mesin host (komputer, laptop, atau server), VirtualBox ternyata juga mendukung virtualisasi atas dirinya. Dengan kemampuannya itu, Anda bisa menjalankan guest os  di atas guest os  yang sudah ada atau virtual di atas virtual. Saya baru menyadari hal tersebut setelah menemukan masalah ini. Pesan galat " KVM virtualisation is configured, but not available " di Proxmox Pada pesan kesalahan " KVM virtualisation is configured, but not avalable " juga terdapat himbauan. Himbauan tersebut berbunyi " Either disable in VM configuration or enable in BIOS ". Bagi pengguna mesin host  seperti yang saya sebutkan di atas, tentu ini sangat mudah. Anda cukup...
Baca selengkapnya

Koneksi Internet Bermasalah di Ubuntu 18.04, Berikut Cara Memperbaikinya

-
Koneksi internet adalah sumber utama bagi kita bila ingin mengakses informasi secara digital. Baik dari personal komputer, laptop, tablet dan ponsel pintar. Untuk memperolehnya kita harus berlangganan ke ISP atau Penyedia Layanan Internet. Apakah setelah berlangganan internet ke ISP secara otomatis langsung dapat menggunakannya? Ya tidak juga, karena Anda harus menunggu teknisinya datang ke rumah Anda untuk memasang beberapa alat dan mengatur konfigurasinya. Barulah, setelah alat bernama router berhasil dikonfigurasi-kan Anda bisa menikmati informasi yang Anda butuhkan. Tapi, tidak demikian pada sebuah kasus yang pernah saya temui di lapangan. Masih ada beberapa konfigurasi lagi yang dibutuhkan. Entah kenapa. Beruntung, ada komputer lain yang sudah terhubung ke internet dengan jaringan yang sama. Galat Pada Koneksi Kabel "Device not Manage" Galat ini menyebabkan koneksi jaringan yang menggunakan kabel tidak dapat terhubung. Cara memperbaikinya dengan mengubah pengaturan pada...
Baca selengkapnya