Dulu, ikon sudah tersedia, tetapi menerapkannya secara efisien di WordPress sedikit lebih sulit. Anda dapat mengatasi beberapa masalah, tetapi itu tidak selalu merupakan cara yang baik untuk maju, dan ketika layar retina mulai keluar, masalahnya diperbesar (secara harfiah).
Salah satu solusi paling umum untuk masalah ini adalah dengan menggunakan font ikon. Ikon adalah font atau vektor web, sehingga Anda dapat mengatur skala mereka secara tak terbatas dan banyak ikon dapat masuk ke dalam satu file, sehingga menurunkan jumlah permintaan Anda. Ini memungkinkan Anda untuk menggunakan hampir semua ikon yang mungkin Anda impikan. Namun, dengan ini, muncul pula beberapa pertimbangan kinerja.
Kami akan menunjukkan kepada Anda dalam artikel ini beberapa cara berbeda untuk menggunakan font ikon WordPress, di mana mendapatkannya, dan metode mana yang terbaik untuk situs Anda.
Dimana Anda bisa menemukan ikon ikon?
Ada banyak tempat bagus untuk sekarang menemukan font ikon untuk situs WordPress Anda. Ketik “ikon font” ke Google akan memberikan Anda hasil yang bagus. Salah satu yang paling populer dan banyak digunakan adalah Font Awesome . Saat menulis ini, ia memiliki 1,400+ ikon gratis, serta 4,500+ ikon dalam versi pro mereka. Ini termasuk ikon untuk hampir semuanya, dari antarmuka, ke sosial, panah, dan banyak jenis ikon lainnya.
Berikut adalah beberapa yang lain untuk Anda lihat:
- IcoMoon adalah layanan populer lainnya dengan 5.500 ikon ikon gratis dan 4.000 ikon premium. Faktanya, kita akan menggunakan alat ikon, generator font mereka lebih jauh di bawah.
- Fontello adalah layanan hebat lain yang membantu Anda menemukan dan membuat font ikon.
- Jika Anda mencari set ikon super ringan, pastikan untuk memeriksa Bytesize . Semua 84 ikon berukuran 9KB yang diperkecil (2 KB dalam SVGZ, atau Gzip).
- Jika Anda hanya ingin menggunakan ikon SVG secara manual, Anda tidak akan menemukan perpustakaan gratis yang lebih baik dari ikonmonstr atau perpustakaan premium yang lebih baik daripada Iconfinder .
Cara Cepat dan Mudah Menggunakan Ikon Font WordPress
Pertama-tama kita akan membahas beberapa cara cepat dan mudah untuk menggunakan ikon font WordPress. Peringatan, tidak semua ini adalah yang terbaik dalam hal kinerja. Untuk itu, kami sarankan untuk melewatkan bagian metode terbaik .
Opsi 1 – Gunakan Plugin WordPress
Cara tercepat untuk membangun dan menjalankan dengan ikon font WordPress adalah dengan menggunakan plugin pihak ketiga. Plugin Font Awesome Integration gratis berisi pustaka ikon Font Awesome 5 terbaru. Setelah Anda menginstal dan mengaktifkannya, yang diperlukan hanyalah kode kode pendek sederhana untuk menyisipkan ikon.
Anda dapat memeriksa bagan penggunaan dasar Font Awesome 5 untuk cara-cara tambahan buat menggunakan dan menyesuaikannya, serta perpustakaan ikon mereka. Sebagai contoh, di bawah ini kami menyisipkan ikon WordPress Font Awesome di blok shortcode Gutenberg dan menambahkannya fa-3xmenjadi tiga kali lebih besar.
[fawesome iclass=”fab fa-wordpress fa-3x”]
Cukup mudah bukan? Kami memiliki ikon Font Awesome dan berjalan di situs kami hanya dalam beberapa menit.
Jika Anda ingin banyak kode pendek yang mudah digunakan, Anda mungkin bisa juga memeriksa plugin Shortcodes Ultimate . Mereka memiliki pengaya ikon premium yang dapat Anda gunakan.
Di atas adalah solusi yang bagus jika Anda ingin membiarkan klien Anda menambahkan ikon ke posting atau halaman, tetapi jika Anda ingin menggunakan elemen-elemen ini di dalam tema atau plugin Anda.
Opsi 2 – Gunakan Dasbor Built-in
Dashicons adalah serangkaian ikon font yang disertakan secara default karena WordPress menggunakannya di backend. Anda harus membuatnya di bagian depan, tetapi yang Anda butuhkan hanyalah nama skripnya, file tersebut sudah tersedia untuk WordPress.
Anda dapat menambahkan berikut ini ke functions.php file Anda , atau kami sarankan menggunakan plugin gratis seperti Code Snippets . Ini meminimalkan risiko pelanggara tema Anda dan perubahan juga akan tetap ada selama pembaruan tema.
function my_theme_styles() {
wp_enqueue_style( ‘dashicons’ );
}
Anda kemudian dapat pergi ke situs web Dashicons , pilih ikon dan klik tautan “copy HTML” yang akan memberi Anda kode yang Anda perlukan untuk menampilkan ikon tersebut. Mereka tidak memiliki banyak pilihan, tetapi mereka masih bekerja dengan baik dan sangat ringan.
Dashicons tidak memiliki shortcode keren dengan itu di luar kotak, tetapi Anda dapat menyesuaikan ukuran ikon Anda dengan CSS. Berikut adalah contoh memasukkan ikon tepat sebelum tajuk.
<h2 class=”dashicons-before dashicons-smiley”>My Cool Headline</h2>
Opsi 3 – Tautan Secara Manual ke Font Ikon yang Dihosting Secara Eksternal
Opsi ketiga Anda adalah menautkan secara manual ke font ikon yang dihosting secara eksternal. Ini pada dasarnya adalah apa yang dilakukan plugin pada opsi 1 di atas tadi.
Untuk Font Awesome, Anda dapat mengambil kode dari Start Page mereka dan kemudian ikuti langkah-langkah di bawah ini. Mereka meng-host semua font mereka pada CDN gratis untuk Anda. Akan terlihat seperti ini:
Langkah 1
Salin kode kemasing-masing template atau halaman di situs WordPress Anda tempat Anda ingin menggunakan Font Awesome. Anda dapat mengedit header.php file tema Anda atau lebih baik lagi.
Langkah 2
Anda kemudian dapat mulai menempatkan ikon di HTML Anda. Temukan ikon yang tepat dan pelajari cara menambahkannya ke halaman Anda .
Masalah Kinerja yang Perlu Dipertimbangkan dengan Menggunakan Font Ikon
Meskipun tidak ada yang salah dengan menggunakan salah satu cara di atas untuk menambahkan font ikon ke situs Anda, secara teknis mereka bukan cara terbaik. Mengapa? Itu semua bermuara pada masalah kinerja .
Anda Mungkin Tidak Membutuhkan Semua Ikon Itu
Pertama, ketika Anda menggunakan plugin untuk font ikon atau tautan ke pustaka font ikon eksternal, itu akan memuat semua ikon di seluruh perpustakaannya. Jika Anda hanya menggunakan 20 atau lebih ikon di seluruh situs Anda, ini dapat ditangani dengan cara yang jauh lebih baik.
Misalnya, kami menyertakan pustaka Font Awesome 5 di situs kami dan sementara file CSS untuk itu kecil, file font itu sendiri adalah 108 KB. Meskipun ini mungkin tidak tampak besar, Anda akan melihat lebih jauh di bawah seberapa kecil file itu sebenarnya didapat ketika kita hanya memilih font yang sebenarnya kita gunakan.
Memuat Dari Satu CDN Biasanya Lebih Cepat
Kedua, tidak ada yang salah dengan memuat skrip dari berbagai CDN. Namun, jika Anda memiliki pilihan untuk memuatnya dari satu CDN, ini biasanya lebih cepat. Mengapa? Karena dapat memanfaatkan koneksi HTTP / 2 tunggal dan mengurangi pencarian DNS tambahan . Pastikan CDN utama Anda bagus!
Host Ikon Font Secara Lokal (Hanya Yang Anda Butuhkan)
Karena alasan kinerja yang disebutkan di atas, kami akan memandu Anda melalui cara meng-host font ikon Anda secara lokal, serta hanya menggunakan yang Anda butuhkan. Maksud kami secara lokal adalah memuatnya dari server host WordPress Anda atau CDN Anda sendiri.
Dengan hanya memilih font ikon yang Anda butuhkan, ini dapat menurunkan ukuran file dari 100 KB menjadi beberapa kilobyte , cukup praktis! Bahkan lebih baik: Anda bahkan dapat mencampur dan mencocokkan ikon dari berbagai set font. Temukan tutorialnya di artikel selanjutnya klik disini
