Wordpress

Cara Menambahkan Ikon Font Keren ke WordPress Secara Manual atau Dengan Plugin .

Pernah melihat ikon
bagus di situs WordPress orang lain?  Yang menarik perhatian Anda dan memberi Anda konteks tambahan untuk apa yang Anda lihat.  Pensil, ikon hamburger, hal-hal semacam itu …

Anda tahu, grafik yang terlihat seperti ini?

Jika Anda belum pernah tinggal di gua, saya berani bertaruh bahwa Anda sedang menganggukkan kepala Anda sekarang.

Mereka menjadi populer karena merupakan cara cerdas untuk menambahkan karakter dan konteks ke situs WordPress Anda.  Yup – mereka tidak hanya untuk bersenang-senang, mereka sebenarnya memiliki beberapa manfaat yang sangat nyata untuk pengalaman pengguna yang akan saya bahas di bawah.

Kemudian, setelah manfaatnya, saya akan menunjukkan cara menambahkan ikon Font Awesome ke WordPress baik secara manual maupun dengan beberapa plugin praktis.

Apa itu Font Awesome?

Font Awesome adalah kumpulan ikon yang populer dan tampak modern.  Pada dasarnya, ribuan ikon berbeda digabungkan menjadi satu paket, yang kemudian dapat Anda masukkan ke situs WordPress Anda.

Font Ikon mengagumkan sangat bagus karena berfungsi seperti font biasa yang Anda gunakan.  Itu berarti mereka adalah:

  • Kompatibel di semua browser.
  • Vektor (artinya Anda dapat mengubah ukurannya sebanyak yang Anda inginkan tanpa kehilangan kualitas)
  • Mudah untuk bergaya.  Anda pada dasarnya dapat memperlakukan mereka seperti “font” biasa.  Artinya Anda dapat dengan mudah mengubah warna sesuai kebutuhan.

Juga mudah untuk menambahkan ikon Font Awesome ke WordPress, berkat basis dukungan yang besar.

Apa Manfaat Kegunaan Menggunakan Ikon Seperti Font yang Mengagumkan?

Pada awalnya, saya hanya berpikir bahwa ikon Font Awesome membuat situs web Anda terlihat sangat keren.  Tapi kemudian saya benar-benar berpikir tentang bagaimana saya menjelajahi web di dunia yang berpusat pada seluler ini.  Dan itu membuat saya melihat kegunaan ikon seperti Font Awesome.

Dan apa yang kamu tahu?  Peneliti pengalaman pengguna yang ikonik (!) Nielsen Norman Group (NNG) memiliki benar-benar menyelidiki masalah ini.

Ternyata, ketika Anda memasukkan ikon ke dalam desain situs web Anda, Anda tidak hanya membuatnya terlihat keren.  Anda juga:

  • Mempermudah pembaca untuk mengklik opsi menu. Meskipun ini sangat bermanfaat untuk perangkat berbasis sentuhan, NNG mencatat bahwa ini juga berlaku untuk perangkat berbasis mouse.
  • Menggunakan lebih sedikit ruang. Ikon memungkinkan Anda untuk menggunakan lebih sedikit teks dan karenanya memadatkan menu Anda.
  • Membiarkan pembaca memahami opsi menu lebih cepat. Misalnya, kita semua tahu bahwa ikon “pensil” berarti “edit”.
  • Menginternasionalkan situs web Anda. Seperti di atas, bukan hanya pengguna berbahasa Inggris yang tahu apa arti ikon pensil.

Tetapi ketika Anda menggunakan ikon, selalu ingat bahwa Anda harus tetap memberikan label teks untuk menyertainya. Banyak penelitian mengatakan bahwa ikon sendiri dapat membingungkan pembaca.  Tetapi ketika Anda memasukkannya sebagai bagian struktur halaman Anda, mereka meningkatkan kegunaan dan membuat halaman Anda lebih estetis.

Cara Menambahkan Ikon Font Keren Secara Manual ke WordPress

Oke, jadi kamu bisa gunakan plugin untuk menambahkan ikon Font Awesome.  Ini akan memungkinkan Anda memasukkannya ke WordPress menggunakan kode pendek, meskipun Anda masih perlu menatanya secara manual.  Saya akan membahasnya di bagian selanjutnya. Tetapi bagi Anda yang lebih menyukai pendekatan yang lebih praktis, sebenarnya sangat mudah untuk menyisipkan ikon Font Awesome secara manual.

Pada dasarnya, yang perlu Anda lakukan hanyalah menambahkan stylesheet Font Awesome ke situs Anda.  Kemudian Anda dapat menyisipkan dan menata ikon Anda menggunakan CSS.  Mari kita masuk ke dalamnya…

Langkah 1: Enqueue Font Awesome Stylesheet di Functions.php

Stylesheet Font Awesome adalah daftar ikon terbaru yang terus diperbarui.  Anda dapat menambahkannya ke situs Anda dengan salah satu dari dua cara:

  • Unduh stylesheet terbaru dari Font Awesome dan unggah ke situs Anda melalui FTP.
  • Tautkan ke versi yang dihosting oleh Bootstrap CDN (Saya telah melakukan ini tanpa masalah).

Apa pun opsi yang Anda pilih, langkah-langkah berikut akan sama.  Satu-satunya hal yang akan berubah adalah URL sebenarnya ke stylesheet.

Untuk mengunduh lembar gaya, kepala di sini, lalu unggah ke situs Anda melalui FTP dan salin jalur file.

Jika tidak, cukup gunakan URL ini ke stylesheet Bootstrap CDN eksternal: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Kemudian, Anda perlu menambahkan kode ini ke file functions.php dari tema anak Anda (saya harap Anda menggunakan tema anak!).

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Jika Anda mengunggah stylesheet ke situs Anda, yang perlu Anda lakukan hanyalah mengganti tautan ke Bootstrap CDN dengan URL ke stylesheet yang dihosting di situs Anda.

Seharusnya terlihat seperti ini:

Cara Menambahkan Ikon Font Keren ke WordPress Secara Manual atau  Dengan Plugin

Sementara beberapa orang akan memberitahu Anda untuk hanya memasukkan link ke stylesheet di file header.php Anda, jangan lakukan itu. Meskipun mungkin masih berfungsi, membuatnya seperti ini cara yang tepat untuk melakukannya.

Langkah 2: Menambahkan Ikon Font Keren ke WordPress

Setelah Anda menambahkan stylesheet, Anda siap untuk mulai memasukkan ikon Font Awesome di WordPress.  Ini sangat sederhana.  Untuk menambahkan ikon dasar apa pun, Anda hanya perlu potongan kode ini:

<i class="ICON NAME" aria-hidden="true"></i>

Jadi di mana menemukan NAMA ICON?  Gampang, langsung aja ke Situs web Font Awesome dan telusuri atau cari ikon:

Mengklik ikon akan membawa Anda ke halaman khusus.  Kemudian, gulir ke bawah dan temukan kode HTML:

Jika Anda ingin menggunakan ikon di postingan, Anda harus memastikan untuk menambahkannya ke Teks tab Editor WordPress.  Misalnya, penambahan ini ke Teks tab:

Membuat ini di frontend:

Langkah 3: Styling Font Ikon Keren

Seperti yang Anda lihat pada contoh di atas, ukuran ikon default sangat kecil.  Sebagian besar waktu, Anda ingin ikon Anda menjadi sedikit lebih besar.  Untungnya, itu sangat mudah dilakukan dengan CSS (ingat bagaimana saya memberi tahu Anda bahwa itu seperti font!).

Untuk membuat ikon Anda lebih besar, Anda hanya perlu menambahkan tambahan sederhana ke kelas ikon.  Misalnya, untuk membuat ikon buku alamat yang saya gunakan di atas tiga kali lebih besar, Anda hanya perlu menambahkan “fa-3x” di akhir kelas seperti ini:

<li><i class="fa fa-address-book fa-3x"></i>

Dan itu memberi Anda ini:

Anda juga dapat memutar ikon, menganimasikan ikon, dan banyak lagi.  Untuk daftar lengkap semua manipulasi yang dapat Anda lakukan, Anda harus memeriksanya Halaman Contoh Font Awesome.

Cara Menambahkan Ikon Font Keren ke WordPress Dengan Plugin

Jika Anda tidak ingin melakukan sesuatu secara manual, Anda juga dapat menggunakan plugin bernama Font Lebih Baik Mengagumkan.

Sejujurnya, saya tidak berpikir itu menyelamatkan Anda itu banyak waktu untuk melakukan hal-hal secara manual.  Tapi itu memberi Anda pembuat kode pendek yang bagus di Editor WordPress.

Ini adalah plugin gratis, sehingga Anda dapat menginstal dan mengaktifkannya langsung dari dashboard WordPress Anda:

Setelah Anda mengaktifkannya, tidak banyak yang perlu dikonfigurasi.  Anda akan melihat yang baru Sisipkan Ikon pembuat kode pendek di Editor WordPress.  Cukup klik, filter ikon Anda, dan masukkan pilihan yang Anda inginkan:

Untuk menata ikon Anda, Anda harus menggunakan kelas yang sama yang saya tunjukkan untuk contoh manual di atas.  Misalnya, untuk membuat ikon 3x lebih besar, Anda perlu menambahkan kelas ini ke kode pendek:

Fakta bahwa Anda masih perlu menata ikon Anda secara manual adalah mengapa saya tidak menemukan plugin yang jauh lebih baik daripada opsi manual.

Menambahkan Ikon Font Keren ke Item Menu

Jika Anda ingin menambahkan ikon Font Awesome ke item menu WordPress yang sebenarnya, ada plugin bagus lainnya yang disebut Font Keren 4 Menu.

Setelah Anda mengaktifkannya, Anda dapat menambahkan ikon Font Awesome ke item menu Anda hanya dengan memasukkan nama Font Awesome di Kelas CSS (opsional) kotak:

Sama seperti semua opsi lainnya, Anda dapat menggunakan opsi gaya yang sama untuk menambah ukuran ikon, menganimasikannya, atau lainnya.

Jika Anda tidak langsung melihat kotak Kelas CSS, Anda mungkin perlu pergi ke Layar Pilihan dan aktifkan:

Membungkus Semuanya

Menambahkan ikon Font Awesome ke WordPress adalah cara yang bagus untuk meningkatkan estetika situs Anda serta memudahkan pengguna Anda untuk bernavigasi.

Preferensi pribadi saya adalah menambahkan Font Awesome secara manual dengan mengantrekan style sheet di file functions.php dari tema anak Anda.  Tetapi jika Anda tidak ingin menghadapinya, kedua opsi plugin yang saya berikan juga memudahkan untuk memulai.

Jika Anda ingin beberapa cara lain untuk meningkatkan font di situs WordPress Anda, saya sarankan Anda juga melihat panduan kami untuk Google Font dan WordPress.  Dan baca ini jika Anda ingin mempelajari lebih lanjut tentang CSS untuk memahami sedikit cara kerja gaya Font Awesome.

Demikanlah tulisan tentang Cara Menambahkan Ikon Font Keren ke WordPress Secara Manual atau Dengan Plugin . Semoga dapat menjadi manfaat bagi kita semua.

Related Articles

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Back to top button