Cara Mudah Menambahkan Font Ikon ke Tema WordPress Anda
Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Cara Mudah Menambahkan Font Ikon ke Tema WordPress Anda
Apakah Anda ingin menambahkan font ikon ke situs WordPress Anda? Baru-baru ini, salah satu pembaca kami menanyakan cara termudah untuk menambahkan font ikon ke tema WordPress Anda.
Font ikon memungkinkan Anda menambahkan ikon vektor (dapat diubah ukurannya) tanpa memperlambat situs web Anda. Mereka dimuat sebagai font web dan dapat dirancang dengan CSS.
Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan font ikon dengan mudah ke tema WordPress Anda, selangkah demi selangkah.
Apa itu font ikon dan mengapa saya harus menggunakannya?
Font ikon berisi simbol atau piktogram, bukan huruf dan angka. Piktogram ini dapat dengan mudah ditambahkan ke konten situs web dan diubah ukurannya dengan CSS. Dibandingkan dengan ikon berbasis gambar, ikon font jauh lebih cepat, yang membantu kecepatan keseluruhan situs WordPress Anda.
Font ikon dapat digunakan untuk menampilkan ikon yang umum digunakan. Misalnya, Anda dapat menggunakannya dengan keranjang belanja, tombol unduh, kotak fitur, kontes hadiah, dan bahkan di menu navigasi WordPress.
Ada beberapa font ikon sumber terbuka dan gratis yang tersedia yang memiliki ratusan ikon yang indah.
Faktanya, setiap instalasi WordPress dilengkapi dengan set font ikon dashicon gratis. Ikon-ikon ini digunakan di menu admin WordPress dan area lain di area admin WordPress.
Beberapa sumber ikon populer lainnya adalah:
- Font yang mengagumkan
- Umum
- IcoMoon
- Linier
- ikon dokumen Google
- proyek yang sebenarnya
Untuk keperluan tutorial ini, kita akan menggunakan Font Awesome. Ini adalah font ikon sumber terbuka dan gratis paling populer yang tersedia. Kami menggunakan FontAwesome di situs WPBeginner, serta plugin WordPress kami seperti OptinMonster, WPForms, RafflePress, dll.
Dalam panduan ini, kami akan membahas tiga cara untuk menambahkan font ikon di WordPress. Anda dapat memilih solusi yang paling sesuai untuk Anda.
Tambahkan Font Ikon di WordPress Menggunakan Plugin
Jika Anda adalah pengguna tingkat pemula yang hanya mencoba menambahkan beberapa ikon ke posting atau halaman Anda, maka metode ini tepat untuk Anda. Anda tidak perlu memodifikasi file tema, dan Anda dapat menggunakan font ikon di manapun di situs Anda.
Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin Font Awesome WordPress. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.
Setelah aktivasi, plugin mengaktifkan dukungan Font Awesome untuk tema Anda. Anda sekarang dapat mengedit posting atau halaman WordPress apa pun dan menggunakan kode pendek ikon seperti ini:
(nama ikon = “rudal”)
Anda dapat menggunakan kode pendek ini dalam kombinasi dengan teks lain atau hanya dalam blok kode pendek khusus.
Setelah ditambahkan, Anda dapat melihat pratinjau posting atau halaman Anda untuk melihat bagaimana tampilan ikon di situs langsung. Begini tampilannya di situs pengujian kami.
Anda juga dapat secara manual menambahkan kode pendek ikon font di blok paragraf tempat Anda dapat menggunakan pengaturan blok untuk memperbesar ukuran ikon.
Saat ukuran teks bertambah, ini tampak aneh di editor teks. Ini karena kode pendek tidak secara otomatis berubah menjadi font ikon di editor blok.
Anda perlu mengklik tombol pratinjau pada posting atau halaman Anda untuk melihat seperti apa ukuran ikon yang sebenarnya.
Anda juga dapat menggunakan kode pendek ikon di dalam kolom dan membuat kotak fitur seperti ini:
2. Gunakan Font Ikon dengan Pembuat Halaman WordPress
Plugin pembuat halaman WordPress paling populer hadir dengan dukungan bawaan untuk font ikon. Ini memungkinkan Anda untuk menggunakan font ikon dengan mudah di halaman arahan Anda, serta area lain di situs web Anda.
Pembuat berang-berang
Beaver Builder adalah plugin pembuat halaman WordPress terbaik di pasaran. Ini memungkinkan Anda untuk dengan mudah membuat tata letak halaman WordPress khusus tanpa menulis kode apa pun.
Beaver Builder hadir dengan ikon dan modul cantik siap pakai yang dapat Anda seret dan lepas di pos dan halaman Anda.
Anda dapat membuat grup ikon, menambahkan ikon, dan memindahkannya ke baris dan kolom yang diposisikan dengan baik. Anda juga dapat memilih warna, latar belakang, spasi, dan margin Anda sendiri tanpa menulis CSS.
Anda bahkan dapat membuat tema WordPress khusus sepenuhnya tanpa menulis kode apa pun dengan produk Themer Beaver Builder.
Elementor Pro
Elementor adalah plugin pembuat halaman WordPress populer lainnya. Itu juga dilengkapi dengan berbagai elemen yang memungkinkan Anda menggunakan font ikon, termasuk elemen Ikon.
Anda cukup menarik dan melepas ikon di mana saja dan menggunakannya dengan baris, kolom, dan tabel untuk membuat halaman yang indah.
Pembuat halaman populer lainnya seperti Divi dan Visual Composer juga memiliki dukungan penuh untuk font ikon.
3. Tambahkan Font Ikon di WordPress dengan Kode
Seperti yang kami sebutkan sebelumnya, font ikon hanyalah font dan dapat ditambahkan ke situs web Anda seperti menambahkan font khusus apa pun.
Beberapa font ikon, seperti Font Awesome, tersedia di server CDN di web dan dapat ditautkan langsung dari tema WordPress Anda.
Anda juga dapat mengunggah seluruh folder font ke folder di tema WordPress Anda dan kemudian menggunakan font tersebut di stylesheet Anda.
Karena kami menggunakan Font Awesome untuk tutorial ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat menambahkannya menggunakan kedua metode tersebut.
Metode 1:
Cara manual ini cukup mudah.
Pertama, Anda perlu mengunjungi situs web Font Awesome dan memasukkan alamat email Anda untuk mendapatkan kode embed.
Sekarang periksa kotak masuk Anda untuk email Font Awesome dengan kode semat Anda. Salin dan tempel kode embed ini ke file header.php tema WordPress Anda tepat sebelum tag.
Kode semat Anda akan menjadi satu baris yang akan mencari pustaka Font Awesome langsung dari server CDN Anda. Ini akan terlihat seperti ini:
Cara ini lebih sederhana, tetapi bisa menimbulkan konflik dengan plugin lain.
Pendekatan yang lebih baik adalah memuat JavaScript yang benar ke WordPress menggunakan mekanisme antrian bawaan.
Alih-alih menautkan ke lembar gaya dari template tajuk tema Anda, Anda dapat menambahkan kode berikut di file .php tema Anda atau di plugin khusus situs.
function wpb_load_fa() {
wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Metode 2:
Metode kedua bukanlah yang termudah, tetapi memungkinkan Anda menghosting font dari ikon Font Awesome di situs web Anda sendiri.
Anda harus terlebih dahulu mengunjungi situs web Font Awesome untuk mengunduh paket font ke komputer Anda.
Cukup unduh font ikon dan ekstrak paketnya.
Sekarang, Anda harus terhubung ke hosting WordPress Anda menggunakan klien FTP dan masuk ke direktori tema WordPress Anda.
Anda harus membuat folder baru di sana dan beri nama sumbernya. Selanjutnya, Anda perlu mengunggah konten folder icon fonts ke folder fonts di host web Anda.
Anda sekarang siap memuat font ikon ke dalam tema WordPress Anda. Cukup tambahkan kode ini ke file theme.php atau plugin khusus situs Anda.
function wpb_load_fa() {
wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Anda telah berhasil memuat Font Awesome ke dalam tema WordPress Anda.
Sekarang sampai pada bagian di mana Anda akan menambahkan ikon nyata ke tema, posting, atau halaman WordPress Anda.
Tampilkan font ikon secara manual di WordPress
Kunjungi situs web Font Awesome untuk melihat daftar lengkap ikon yang tersedia. Klik ikon apa pun yang ingin Anda gunakan dan Anda akan melihat nama ikon.
Salin nama ikon dan gunakan seperti ini di WordPress.
Anda dapat mendesain ikon ini di stylesheet tema Anda seperti ini:
.fa-arrow-alt-circle-up {
font-size:50px;
color:#FF6600;
}
Anda juga dapat menggabungkan berbagai ikon dan mendesainnya secara bersamaan. Misalnya, Anda ingin menampilkan daftar tautan dengan ikon di sebelahnya. Anda bisa membungkusnya di bawah satu
elemen dengan kelas tertentu.
Home Library Applications Settings
Sekarang Anda dapat mendesainnya di stylesheet tema Anda seperti ini:
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
Kami harap artikel ini membantu Anda mempelajari cara menambahkan font ikon dengan mudah ke tema WordPress Anda. Anda juga dapat melihat panduan kami tentang cara menambahkan ikon gambar menggunakan menu navigasi di WordPress.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton tutorial video WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
