Ini adalah kelanjutan artikel dari Cara Cepat dan Mudah Menggunakan Ikon Font WordPress yang dibahas sebelumnya. Sedikit saya akan menyalin kata kata sebelumnya untuk memulai artikel ini.
Karena alasan kinerja yang disebutkan pada artikel sebelumnya, 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.
Dasar – Dasar Cara Kerja
Menggunakan ikon font melibatkan hosting file font (WOFF, WOFF 2, dll.) Di server web Anda, kemudian menggunakan CSS untuk memuat gambar font, kemudian membuat beberapa markup untuk menambahkan ikon di tempat yang benar.
Meskipun situs Anda akan memuat satu file, Anda sebenarnya akan memiliki sejumlah format file untuk setiap font karena beberapa browser menggunakan format yang berbeda. Font Awesome memiliki 6 format file yang berbeda termasuk: EOT, SVG, TTF, WOFF, WOFF 2 dan OTF. Namun, berdasarkan dukungan browser Anda benar-benar hanya perlu WOFF atau WOFF 2.
Kiat : WOFF didukung oleh 93% + dari semua browser modern. Namun, WOFF 2 dikompresi lebih banyak, tetapi hanya didukung oleh 83% + dari semua browser modern. Kami sarankan memilih satu atau yang lain atau keduanya. Browser akan menentukan berdasarkan pada kode Anda yang mana akan dikirimkan ke klien.
Tugas pertama Anda adalah menggunakan alat untuk memilih hanya ikon yang Anda inginkan. Anda kemudian dapat menambahkan file-file ini ke direktori proyek Anda di suatu tempat, biasanya didirektori font.
Selanjutnya, Anda menambahkan file Font Awesome CSS ke proyek Anda dan menambahkannya ke situs web Anda menggunakan elemen tautan lama biasa.
<link rel=”stylesheet” href=”css/font-awesome.min.css”>
Anda juga bisa membuat enqueue file CSS atau jika itu kecil, cukup gunakan inline.
Jika Anda melihat file CSS Anda dapat melihat apa yang terjadi di latar belakang. File font dimuat, elemen dasar dengan kelas .fa didefinisikan (bersama dengan beberapa yang lain), dan akhirnya, masing-masing ikon didefinisikan (misalnya: .fa-book).
Satu-satunya hal yang perlu Anda perhatikan adalah jalur ke file font Anda. Secara default, mereka diambil dari ../fonts dimana akan menjadi direktori font, satu folder dari file CSS saat ini. Anda mungkin perlu mengubah ini agar sesuai dengan struktur direktori Anda sendiri.
Sekarang Anda memiliki gagasan yang lebih baik tentang cara kerjanya, kami akan menambahkan untuk memandu Anda melalui cara melakukannya dalam langkah demi langkah. Dalam contoh ini, kami menggunakan situs e-niaga produksi.
Langkah 1
Pertama, Anda harus menentukan pustaka ikon ikon mana yang ingin Anda gunakan. Dalam contoh ini, kita akan menggunakan Font Awesome bersama dengan generator font IcoMoon . Jika Anda ingin file WOFF 2 dari IcoMoon, Anda harus membayar biaya satu kali sebesar $ 9,00 untuk mengakses perpustakaan premium mereka.
Anda dapat mengunduh ikon Font Awesome yang Anda inginkan secara manual dengan gratis, tetapi Anda harus menggunakan alat seperti FontForge untuk secara manual mengedit file WOFF atau WOFF 2 mereka.
Langkah 2
Ke generator IcoMoon . Anda mengklik “Tambah” dipustaka Font Awesome.
Langkah 3
Selanjutnya, Anda ingin memilih ikon yang ingin Anda gunakan di situs WordPress Anda. Jika Anda sudah menggunakan Font Awesome dan hanya pindah ke versi yang dihosting secara lokal, buka dan buat daftar pendek lalu pilih dari Perpustakaan.
Dalam contoh ini, kami memilih ikon untuk perfmatters.io , situs ecommerce WordPress yang menjalankan Unduhan Digital.
Langkah 4
Setelah Anda memilih semua ikon Anda, pilih “Generate Font” di bagian bawah.
Anda akan berakhir dengan file yang terlihat seperti ini. Yang penting Anda butuhkan adalah style.css file dan file font (WOFF, WOFF 2).
Langkah 5
Selanjutnya, disarankan Anda melakukan pencarian dan ganti style.css sebelum Anda mengunggah / menyalinnya ke situs Anda. Inilah yang terlihat seperti aslinya.
Bagi Anda yang sudah menggunakan Font Awesome, ini hanya membuatnya lebih mudah untuk mengubah kelas menjadi Font Awesome, dengan cara ini jika ada sesuatu yang sudah dikodekan pada situs WordPress Anda dengan itu, maka secara otomatis akan mulai menggunakan ikon.
Jadi, lakukan Find untuk “ikon” dan ganti semua kemunculan dengan “fa”. Anda harus dapat melakukan pencarian cepat dan mengganti dengan editor teks seperti Sublime.
Hal ini menggantikan [class^=”icon-“], [class*=” icon-“]dengan [class^=”fa-“], [class*=” fa-“]. Ini juga memperbaiki setiap ikon, jadi alih-alih memulai .icon-, mereka sekarang mulai dengan .fa-.
Anda mungkin juga perlu mengubah URL sumber berdasarkan tempat Anda mengunggah file font Anda pada Langkah 7. Kami sarankan mengubah URL ke CDN Anda.
Langkah 6
Selanjutnya, Anda perlu menambahkan CSS ke situs Anda. Ada beberapa cara Anda bisa melakukan ini.
Pilihan 1
Karena jumlah CSS sangat kecil, Anda dapat menyalin semua CSS file dan menempelkannya ke WordPress Customizer. Jangan pernah melakukan ini untuk file besar, tetapi ini adalah jumlah CSS yang relatif kecil. Ini berarti akan memuat inline di situs Anda.
pilihan 2
Anda dapat menautkan ke stylesheet Anda secara manual dengan menempatkannya di header situs WordPress Anda. Tautkan ke CDN Anda sendiri untuk kinerja yang lebih cepat.
<link rel=”stylesheet” href=”https://cdn.yourdomain.com/fonts/style.css”>
Opsi 3
Anda juga dapat membuat file CSS di WordPress. Prosesnya sangat mirip dengan cara manual. Tambahkan berikut ini ke functions.php file tema Anda , atau gunakan plugin Code Snippets gratis . Anda mungkin perlu mengubah direktori berdasarkan tempat Anda mengunggahnya.
function my_theme_styles() {
wp_enqueue_style( ‘FontAwesome’, get_template_directory_uri() . ‘/css/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_styles’ );
Langkah 7
Sekarang setelah CSS ditambahkan ke situs Anda, saatnya mengunggah file font. Anda dapat meletakkan font di mana saja, folder yang disebut “font” di / publik Anda langsung baik-baik saja. Ingat juga, folder sumber dalam style.css file Anda harus cocok.
Langkah 8
Sekarang situs WordPress Anda harus memiliki CSS dan file font yang dapat diakses. Jadi selanjutnya, Anda dapat menambahkan beberapa markup ke situs Anda.
Ingatlah bahwa Anda dapat menggunakan elemen apa pun, bukan hanya i. Anda dapat menggunakan span elemen reguler juga, selain menambahkan CSS ke kelas kustom Anda.
Perbedaan sebenarnya adalah ketika Anda melihat perbedaan ukuran. Ingat, ketika ditautkan ke pustaka eksternal Font Awesome, ukuran total file font adalah 108 KB. Setelah menggunakan generator font dan hanya memilih ikon Font Awesome yang kami butuhkan untuk situs, itu membawa file font ke 2,6 KB.
Anda juga dapat menggunakan pendekatan yang sama dengan ikon SVG ini, hanya saja sedikit berbeda.
Demikianlah pembahasan untuk Cara MengHost Ikon Font Secara Lokal yang bisa kami sampaikan. Semoga artikel ini bisa bermanfaat!
*all image by kinsta.com
