Cara Menggunakan Font Ikon di Editor Posting WordPress (Tanpa Kode)

Apakah Anda ingin menggunakan font ikon di editor posting WordPress?

Font ikon memungkinkan Anda menggunakan gambar dan simbol dengan mudah dalam teks. Mereka ringan dan tidak akan memperlambat situs Anda, dan mereka dapat dengan mudah diskalakan ke ukuran apa pun dan diberi gaya seperti font teks lainnya.

Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah menggunakan font ikon di editor posting WordPress tanpa menulis kode HTML apa pun.

Kami akan menunjukkan kepada Anda beberapa metode, masing-masing menggunakan pendekatan yang sedikit berbeda dari yang lain. Anda dapat memilih salah satu yang paling cocok untuk Anda.

Metode 1. Menambahkan Font Ikon di WordPress Post Editor menggunakan JVM Rich Text Icons

Metode ini disarankan untuk digunakan pada jenis apa pun situs WordPress. Mudah digunakan dan bekerja mulus dengan editor blok.

Pertama, Anda perlu menginstal dan mengaktifkan Ikon Teks Kaya JVM plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara install plugin wordpress.

Setelah aktivasi, Anda cukup mengedit WordPress posting atau halaman atau buat yang baru. Di dalam editor pos, tambahkan blok paragraf baru, dan Anda akan melihat ikon Bendera baru di bilah alat blok.

Mengkliknya akan menampilkan sembulan ikon untuk dipilih. Ini menggunakan font ikon Font Awesome yang populer secara default.

Anda dapat menggunakan pencarian untuk mencari ikon atau cukup menggulir ke bawah untuk menemukan ikon yang Anda inginkan, lalu klik untuk menambahkannya.

Salah satu keuntungan menggunakan font ikon adalah Anda dapat menggunakan CSS untuk menatanya.

Namun, karena Anda sudah menggunakan editor blok, Anda cukup menggunakan alat warna bawaan untuk mengatur gaya ikon.

Plugin ini memungkinkan Anda menggunakan font ikon di sebagian besar blok teks seperti Paragraf, Daftar, TombolKolom, Sampul, dan lainnya.

Berikut adalah contoh penggunaan font ikon dan opsi blok untuk memberi gaya pada tiga kolom.

Contoh berguna lainnya menggunakan font ikon adalah dengan tombol.

Kali ini kami menggunakan font ikon sebaris di samping beberapa teks untuk dua tombol.

Jangan ragu untuk menggunakan alat editor blok seperti perataan teks, warna, spasi, dan lainnya untuk mendapatkan hasil maksimal dari font ikon.

Metode 2. Tambahkan Font Ikon di Editor Posting WordPress dengan Font Awesome

Metode ini mengharuskan Anda menambahkan kode pendek di editor pos untuk menampilkan font ikon. Anda dapat menggunakan metode ini jika Anda tidak perlu menggunakan font ikon secara teratur di posting dan halaman WordPress Anda.

Pertama, Anda perlu menginstal dan mengaktifkan Font Keren plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara install plugin wordpress.

Setelah aktivasi, Anda dapat mengedit posting atau halaman di WordPress dan menggunakan kode pendek berikut untuk menambahkan ikon font.

Parameter name disini adalah nama font yang digunakan oleh Font Awesome. Anda dapat menemukan seluruh daftar di Lembar contekan Font Awesome halaman.

Setelah ditambahkan, Anda dapat mempratinjau posting atau halaman Anda untuk melihat bagaimana ikon akan terlihat di situs langsung karena tidak akan ditampilkan sebagai ikon di editor blok.

Ini adalah tampilannya di situs pengujian kami.

Anda dapat menggunakan kode pendek di dalam paragraf dan sejajar dengan teks lain. Anda juga dapat menambahkannya sendiri menggunakan blok ‘Shortcode’.

Namun, menggunakan blok ‘Shortcode’ tidak akan memberi Anda opsi gaya yang akan Anda dapatkan dengan blok teks lainnya.

Anda juga dapat menambahkan kode pendek di dalam kolom untuk membuat baris fitur.

Ini akan sedikit lebih rumit karena Anda tidak akan dapat melihat gambar yang sebenarnya, dan ketinggian kolom akan terus berubah di dalam editor.

Inilah tampilannya di situs web pengujian kami. Kolomnya memiliki tinggi yang sama, meskipun tidak ada di editor.

Anda mungkin harus mempratinjau karya Anda di tab browser baru berkali-kali untuk melihat tampilannya bagi pengguna.

Metode 3. Menggunakan Font Ikon dengan Pembuat Halaman WordPress

Metode ini sangat bagus jika Anda membuat halaman arahan atau mendesain situs web Anda menggunakan pembuat halaman WordPress seperti SeedProd.

SeedProd adalah pembuat halaman WordPress terbaik di pasaran. Ini memungkinkan Anda untuk dengan mudah membuat halaman arahan yang indah atau mendesain situs web lengkap Anda.

Pertama, Anda perlu menginstal dan mengaktifkan SeedProd plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara install plugin wordpress.

Setelah aktivasi, Anda akan diminta untuk memasukkan kunci lisensi plugin Anda. Anda dapat menemukan informasi ini di bawah akun Anda di situs web SeedProd.

Setelah memasukkan kunci lisensi dan mengeklik ‘Verifikasi Kunci’, Anda dapat mulai mengerjakan laman landas Anda.

Cukup pergi ke SeedProd » Halaman Arahan halaman dan klik tombol ‘Tambah Halaman Arahan Baru’.

Setelah itu, Anda akan diminta untuk memilih template untuk landing page Anda.

SeedProd hadir dengan sekumpulan desain cantik yang dapat Anda gunakan sebagai titik awal, atau Anda dapat memulai dengan template kosong dan mendesain semuanya sendiri.

Untuk tutorial ini, kita akan menggunakan template yang telah dirancang sebelumnya. Cukup klik pada templat untuk memilihnya dan melanjutkan.

Selanjutnya, Anda akan diminta untuk memberikan judul halaman arahan Anda dan memilih URL.

Setelah memasukkannya, klik tombol ‘Simpan dan Mulai Mengedit Halaman’ untuk melanjutkan.

SeedProd sekarang akan meluncurkan antarmuka pembuat halaman. Ini adalah alat desain seret dan lepas tempat Anda cukup mengarahkan dan mengeklik item apa pun untuk mengeditnya.

Anda juga dapat menyeret dan melepaskan blok dari kolom kiri untuk menambahkan elemen baru ke desain Anda.

Demi tutorial ini, kita akan menambahkan blok Ikon.

Setelah Anda menambahkan blok, Anda cukup mengklik untuk mengedit propertinya.

Kolom kiri akan berubah untuk menampilkan opsi untuk blok Ikon. Anda dapat mengeklik bagian ‘Ikon’ di sebelah kiri dan memilih gambar ikon yang berbeda atau mengubah warna dan gaya.

Cara lain untuk menggunakan icon di SeedProd adalah dengan menambahkan blok ‘Icon Box’.

Perbedaan antara ini dan blok ‘Ikon’ yang kami gunakan sebelumnya adalah bahwa ‘Kotak Ikon’ memungkinkan Anda untuk menambahkan teks bersama dengan ikon pilihan Anda.

Ini adalah salah satu cara paling umum untuk menggunakan ikon saat menampilkan produk fiturlayanan, dan item lainnya.

Anda dapat menempatkan kotak ikon Anda di dalam kolom, memilih warna, dan menyesuaikan ukuran ikon sesuai keinginan Anda.

Selain itu, Anda juga dapat memformat teks yang menyertai menggunakan bilah alat pemformatan SeedProd.

Setelah Anda selesai mengedit halaman Anda, jangan lupa klik tombol ‘Simpan’ di sudut kanan atas layar.

Jika Anda sudah siap, Anda dapat mengeklik ‘Publikasikan’ agar halaman tersebut ditayangkan, atau Anda dapat mengeklik ‘Pratinjau’ untuk memastikan tampilannya seperti yang Anda inginkan.

Anda juga dapat mengklik ‘Simpan sebagai Templat’ sehingga Anda dapat menggunakan kembali desain ini dengan SeedProd di bagian lain situs web Anda.

Inilah tampilan font ikon di situs web pengujian kami.

Kami harap artikel ini membantu Anda mempelajari cara menggunakan font ikon di editor posting WordPress tanpa menulis kode HTML. Anda mungkin juga ingin melihat kami Panduan kinerja WordPress untuk mengoptimalkan kecepatan situs web Anda atau plugin halaman arahan terbaik untuk WordPress.

Jika Anda menyukai artikel ini, silakan berlangganan ke kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter Dan Facebook.

.

Sumber Artikel