Cara mudah menambahkan font simbol ke tata letak WordPress Anda
Apakah Anda ingin menambahkan font simbol ke situs WordPress Anda? Baru-baru ini, salah satu pembaca kami bertanya bagaimana cara termudah untuk menambahkan font simbol ke tema WordPress Anda.
Dengan font simbol, Anda dapat menambahkan simbol vektor (dapat disesuaikan ukurannya) tanpa memperlambat situs Anda. Mereka dimuat sebagai font web dan dapat dirancang dengan CSS.
Pada artikel ini kami akan menunjukkan kepada Anda langkah demi langkah cara mudah menambahkan font simbol ke tata letak WordPress Anda.
Apa font simbolis dan mengapa saya harus menggunakannya?
Font simbol berisi simbol atau piktogram alih-alih huruf dan angka. Ikon-ikon ini dapat dengan mudah ditambahkan ke konten situs dan diubah ukurannya menggunakan CSS. Dibandingkan dengan simbol berbasis gambar, simbol font jauh lebih cepat, yang berkontribusi terhadap kecepatan keseluruhan situs WordPress Anda.
Font simbol dapat digunakan untuk menampilkan simbol yang sering digunakan. Misalnya, Anda dapat menggunakannya dengan keranjang belanja, tombol unduh, kotak fitur, kontes hadiah, dan bahkan di menu navigasi WordPress.
Ada beberapa font simbol sumber gratis dan terbuka dengan ratusan simbol indah.
Faktanya, setiap instalasi WordPress dilengkapi dengan font gratis untuk ikon Dashicon. Simbol-simbol ini digunakan dalam menu admin WordPress dan di area lain dari area admin WordPress.
Beberapa font simbol populer lainnya adalah:
- Font yang mengagumkan
- generik
- IcoMoon
- Ikon linear
- Simbol Google
- proyek konten
Untuk tutorial ini kami menggunakan Font Awesome. Ini adalah font simbol open source gratis dan paling populer di pasar. Kami menggunakan FontAwesome di situs WPBeginner, serta plugin WordPress kami seperti OptinMonster, WPForms, RafflePress, dll.
Panduan ini mencakup tiga cara untuk menambahkan font simbol di WordPress. Anda dapat memilih solusi yang paling sesuai untuk Anda.
Tambahkan font simbol di WordPress menggunakan plugin
Jika Anda seorang pemula dan hanya mencoba menambahkan beberapa simbol ke posting atau halaman Anda, metode ini cocok untuk Anda. Anda tidak perlu mengubah file tema apa pun dan dapat menggunakan font simbol di mana saja di situs Anda.
Pertama, instal dan aktifkan plugin Font Awesome WordPress. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.
Setelah plugin diaktifkan, Font Awesome mengaktifkan kompatibilitas dengan tema Anda. Anda sekarang dapat mengedit posting atau halaman WordPress apa pun dan menggunakan kode kartu ikon seperti ini:
(nama ikon = "roket")
Anda dapat menggunakan kode pendek ini dengan teks lain atau hanya di blok kode pendek khusus.
Setelah ditambahkan, Anda dapat melihat pratinjau posting atau halaman Anda untuk melihat seperti apa ikonnya di situs langsung. Ini adalah tampilannya di halaman pengujian kami.
Anda juga dapat menambahkan kode pendek ke simbol font itu sendiri di blok paragraf menggunakan pengaturan blok untuk menambah ukuran simbol.
Saat teks tumbuh, mungkin terasa aneh di editor teks. Ini karena kode kartu dalam editor blok tidak secara otomatis berubah menjadi font simbol.
Anda perlu mengklik tombol pratinjau pada posting atau halaman Anda untuk melihat seperti apa ukuran ikon saat ini.
Anda juga dapat menggunakan kode dari kartu simbol di kolom dan membuat bidang fungsi sebagai berikut:
2, Gunakan font simbol dengan generator halaman WordPress
Plugin pembuat situs WordPress paling populer menawarkan dukungan tipe simbol bawaan. Dengan cara ini, Anda dapat dengan mudah menggunakan font simbol pada halaman arahan Anda dan area lain dari situs Anda.
Pembangun Beaver
Beaver Builder adalah plugin WordPress terbaik untuk pembuat halaman di pasar. Anda dapat dengan mudah membuat tata letak halaman WordPress kustom tanpa menulis kode.
Beaver Builder berisi simbol dan modul siap pakai yang indah yang dapat Anda seret dan lepas di pos dan halaman Anda.
Anda dapat membuat grup simbol, menambahkan satu simbol, dan memindahkannya ke baris dan kolom yang ditempatkan dengan baik. Anda juga dapat memilih warna, latar belakang, jarak, dan bingkai sendiri tanpa harus menulis CSS.
Dengan produk Beaver Builder's Themer, Anda bahkan dapat membuat tata letak WordPress sepenuhnya khusus tanpa menulis kode apa pun.
Elementor Pro
Elementor adalah plugin populer untuk pembangun situs web WordPress. Ini juga berisi berbagai elemen yang dapat Anda gunakan dengan font simbol, termasuk elemen simbol.
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 mendukung font simbol.
3, Tambahkan font simbol secara manual dengan kode di WordPress
Seperti disebutkan sebelumnya, font simbol hanya font dan dapat ditambahkan ke situs Anda seperti font khusus.
Beberapa font simbol, seperti B. Font Awesome, tersedia dari server CDN di Internet dan dapat dihubungkan langsung melalui tema WordPress Anda.
Anda juga dapat mengunggah seluruh folder font ke folder dalam tema WordPress Anda dan kemudian menggunakan font-font itu di lembar gaya Anda.
Saat kami menggunakan Font Awesome untuk tutorial ini, kami akan menunjukkan kepada Anda bagaimana menambahkannya menggunakan salah satu metode.
metode 1:
Metode manual ini relatif sederhana.
Pertama, kunjungi situs Font Awesome dan masukkan alamat email Anda untuk mendapatkan kode yang disematkan.
Sekarang periksa inbox Anda untuk email Font Awesome dengan kode embed Anda. Salin kode ini dan rekatkan ke file header.php tema WordPress Anda sebelum hari itu.
Kode embed Anda terdiri dari satu baris yang mencari direktori Font Awesome langsung dari server CDN Anda. Ini terlihat seperti ini:
Metode ini lebih sederhana tetapi mungkin bertentangan dengan plugin lain.
Pendekatan yang lebih baik adalah memuat JavaScript dengan benar ke WordPress menggunakan mekanisme antrian bawaan.
Alih-alih menautkan lembar gaya Anda ke templat judul tema Anda, Anda dapat menempelkan kode berikut ke file features.php tema Anda atau 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 Anda dapat meng-host font menggunakan ikon Font Awesome di situs Anda sendiri.
Pertama, kunjungi situs Font Awesome untuk mengunduh paket font ke komputer Anda.
Cukup unduh font simbol dan bongkar paket.
Sekarang Anda harus terhubung ke hosting WordPress Anda menggunakan klien FTP dan beralih ke direktori tema WordPress Anda.
Anda harus membuat direktori baru di sana dan menamainya sebagai sumber. Kemudian unggah konten folder font simbol ke folder font di server hosting web Anda.
Anda sekarang dapat memuat font simbol ke dalam tata letak WordPress Anda. Cukup tambahkan kode ini ke file features.php di tema 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 memuat Font Awesome di tema WordPress Anda.
Sekarang tiba bagian di mana Anda menambahkan simbol nyata ke tema WordPress Anda, posting atau halaman.
Tampilan font simbol secara manual di WordPress
Kunjungi situs web Font Awesome untuk melihat daftar lengkap simbol yang tersedia. Klik ikon yang ingin Anda gunakan dan nama ikon akan muncul.
Salin nama simbol dan gunakan di WordPress sebagai berikut.
Anda dapat mendesain simbol ini dalam style sheet untuk artikel Anda sebagai berikut:
.fa-arrow-alt-circle-up {
font-size:50px;
color:#FF6600;
}
Anda juga dapat menggabungkan berbagai simbol dan mendesainnya secara bersamaan. Misalkan Anda ingin menampilkan daftar tautan dengan ikon di sebelahnya. Anda dapat membungkusnya di bawah satu
Elemen dengan kelas tertentu.
Home Library Applications Settings
Sekarang Anda dapat mendesainnya dalam style sheet untuk artikel Anda sebagai berikut:
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
Kami harap artikel ini membantu Anda mempelajari cara mudah menambahkan font simbol ke tema WordPress Anda. Anda juga dapat membaca tutorial kami tentang cara menambahkan ikon gambar dengan menu navigasi di WordPress.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
