Orang-orang secara alami tertarik pada tampilan visual a situs jaringan WordPress, sebanyak mereka tertarik pada konten tertulis yang Anda bagikan. Bahkan menurut Jeff Bullas ", Artikel dengan gambar memiliki 94% lebih banyak penayangan daripada artikel tanpa gambar.

Itu peningkatan besar dalam tampilan halaman jika Anda bertanya kepada saya.

Dan apa alasannya tepat?

Cukup tambahkan beberapa gambar relevan artikel berkualitas tinggi di seluruh konten Anda.

Tapi bagaimana dengan gambar di Anda? situs jaringan yang melampaui tangkapan layar dan foto? Bagaimana dengan gambar yang tidak hanya menarik perhatian, tetapi juga memiliki fungsi yang bermanfaat?

Ya, saya berbicara tentang ikon. Anda tahu, gambar-gambar kecil yang ditemukan di situs web untuk mendorong berbagi di media sosial, untuk menggambarkan halaman kontak pemilik bisnis, untuk menyebutkan beberapa kasus digunakan.

Karena idenya diambil dari situs ini, the pengunjung tidak hanya tertarik pada gambar di situs web tetapi juga cenderung untuk berinteraksi dengannya, orang mulai menambahkannya ke situs web mereka.

Namun seiring kemajuan teknologi, seperti biasa, ikon gambar tradisional mulai goyah sebagai solusi gambar untuk situs web. Ini karena mereka membuat halaman jauh lebih berat dan karena itu lebih lambat, tetapi di atas semua itu, solusi ini tidak selalu cocok untuk ponsel.

Tetapi ada solusinya: font ikon.

Hari ini saya akan memberi tahu Anda apa itu font ikon dan manfaat menggunakannya di situs WordPress Anda. Selain itu, saya akan menunjukkan cara menambahkan font ikon ke situs WordPress Anda menggunakan plugin populer " Font yang lebih baik yang mengagumkan '.

Jadi, mari kita mulai.

Apa itu font ikon dan mengapa Anda harus menggunakannya?

Font ikon persis seperti yang mereka katakan: font dibangun sepenuhnya menjadi ikon. Faktanya, font ikon atau " membuat-icon "Dapat digambarkan sebagai font yang hanya menampilkan karakter atau simbol, bukan huruf dan angka yang dikaitkan dengan font dan teks tradisional.

Font ikon WordpressFont ikon digunakan untuk menampilkan simbol yang umum digunakan di situs Anda. Misalnya, tombol media sosial, keranjang Anda, tombol unduh, dan tombol navigasi adalah contoh ikon yang menampilkan gambar kecil dan interaktif di situs Anda.

Fonticone di situs web

Mengapa menggunakan font ikon?

Ikon gambar telah berfungsi dengan baik di masa lalu bagi banyak pemilik situs. Namun, seiring dengan berkembangnya aturan navigasi, kegunaan, dan desain, font ikon telah menjadi solusi terbaik untuk menampilkan gambar interaktif di a situs web.

Berikut ini beberapa alasan kuat mengapa font ikon adalah pilihan terbaik:

  • Mudah diperluas tanpa kehilangan kualitas
  • Dapat disesuaikan dalam hal warna dan bayangan
  • 100% responsif
  • Bekerja seperti sprite gambar CSS, tetapi berperilaku seperti teks
  • Mudah digunakan
  • browser yang kompatibel
  • Sesuaikan opasitas, rotasi, dan lainnya
  • Ukuran file yang lebih kecil
  • Jangan mengorbankan kecepatan atau kinerja situs Anda

Seperti yang Anda lihat, ada beberapa alasan mengapa Anda mungkin ingin menggunakan font ikon di situs web Anda daripada ikon gambar.

Menginstal ikon font di situs Anda menggunakan plugin

Better Font Awesome adalah WordPress Plugin freeware yang memungkinkan Anda untuk secara otomatis mengintegrasikan versi terbaru Font Awesome ke dalam proyek WordPress Anda. Selain itu, ia hadir dengan CSS, kode pendek, dan generator kode pendek TinyMCE.

Plugin ini memiliki berbagai fitur yang berguna untuk pemilik situs:

  • Pembaruan rutin dari versi terbaru
  • Kemampuan untuk beralih di antara versi Font Awesome tanpa mengubah kode pendek
  • Dukungan untuk plugin font populer lainnya termasuk shortcode-nya
  • Dikeluarkan oleh jsDelivr CDN

Langkah 1: Menginstal dan Mengaktifkan Better Font Awesome

Untuk memulai, instal dan aktifkan plugin "Better Font Awesome" melalui dasbor WordPress Anda seperti yang Anda lakukan dengan plugin lainnya.

Pertama, navigasikan ke " Plugins> Tambahkan baru Dan mencari " Font yang lebih baik yang mengagumkan '.

Instal dan aktifkan plugin luar biasa font yang lebih baik

Kemudian pilih " install sekarang Â»Dan klik pada« mengaktifkan '.

Setelah diaktifkan, plugin menambahkan tautanFont yang lebih baik yang mengagumkanDi bawah menu Pengaturan di dasbor WordPress Anda.

Font yang lebih baik dan item menu baru yang mengagumkan

Langkah 2: Mengkonfigurasi Pengaturan Plugin

Untuk mengkonfigurasi plugin « Font yang lebih baik yang mengagumkan ", Mulailah dengan mengklik item menu" Font yang lebih baik yang mengagumkan Di bawah Pengaturan. Setelah Anda melakukannya, Anda akan melihat layar seperti ini:

Pengaturan konfigurasi plugin yang luar biasa font yang lebih baikDi sini Anda dapat melakukan hal berikut:

  • Versi: Pilih versi "Better Font Awesome" yang ingin Anda gunakan.
  • Gunakan Minified CSS: Centang kotak ini jika Anda ingin menggunakan versi CSS yang diperkecil.
  • Hapus font pencetakan yang ada: pilih kotak ini untuk mencoba menghapus potongan kode dan kode pendek yang ditambahkan oleh plugin dan tema lain.
  • Sembunyikan ulasan admin: Sembunyikan peringatan admin default yang muncul saat terjadi kesalahan API dan CDN.

Selain jumlah minimum opsi Better Font Awesome, ada bagian "Penggunaan" kecil yang menjelaskan cara menambahkan ikon ke situs Anda.

Menggunakan plugin luar biasa font yang lebih baik

Langkah 3: Menambahkan Ikon ke Situs Web Anda

Ada tiga cara mudah untuk menambahkan ikon ke situs web Anda menggunakan "Better Font Awesome" - melalui shortcode, HTML, atau TinyMCE.

# 1. Menambahkan ikon menggunakan shortcode

Untuk menambahkan ikon ke situs web Anda menggunakan kode pendek, pertama-tama kunjungi " Font Keren Untuk melihat daftar lengkap ikon yang tersedia yang dapat digunakan.

Di sini Anda dapat mencari ikon yang Anda inginkan. Misalnya, jika Anda menginginkan ikon "email", cukup telusuri kata kunci tersebut dan pilih ikon yang ingin Anda gunakan dengan mengkliknya.

Cari ikon di fontawesomeSetelah mengklik ikon yang ingin Anda tambahkan, Anda akan melihat layar yang menampilkan gambar ikon dengan ukuran berbeda dan blok kecil kode:

Ikon font dengan semua ukurannyaCukup salin blok kode tersebut dan tempelkan di mana saja di situs web Anda menggunakan tab "Editor Teks". Seperti inilah editor akan terlihat di situs web Anda:

Editor kode dengan ikon di wordpressEditor kode dengan ikon di wordpressPada akhirnya, inilah yang dimaksud pengunjung akan melihat ketika mereka mengakses situs Anda:

Hasil poster ikon Wordpress
# 2. Menambahkan ikon menggunakan kode HTML

Seperti yang kita lihat di bagian " penggunaan Anda memiliki opsi untuk menggunakan kode HTML untuk menyisipkan ikon di situs web Anda. Namun, pengembang plugin mempertimbangkan bahwa menggunakan HTML memerlukan awalan khusus versi.

Itulah mengapa mereka menyarankan Anda menggunakan shortcode sebagai gantinya. Namun, jika Anda ingin menggunakan kode HTML, Font Awesome punya informasi yang berguna di sini.

# 3. Menambahkan ikon menggunakan TinyMCE

Ini mungkin cara termudah untuk menambahkan ikon ke situs Anda. Dalam mode "Editor Visual", cukup klik ikon Sisipkan. Dari sana, gulir melalui opsi ikon yang tersedia atau persempit hasil Anda menggunakan fitur pencarian.

Tombol pencarian ikon editor visual Wordpress

Setelah Anda menemukan ikon yang Anda inginkan, klik saja. Generator kode pendek secara otomatis memasukkan informasi yang diperlukan ke dalam posting atau halaman Anda.

Jika Anda ingin mempelajari cara menyesuaikan ikon di situs Anda, lihat contoh " Font Keren '.