Cara Mudah Menambahkan Font Ikon di Tema WordPress Anda

Apakah Anda ingin menambahkan font ikon di situs WordPress Anda? Baru-baru ini salah satu pembaca kami bertanya apa cara termudah untuk menambahkan font ikon di tema WordPress mereka?

Font ikon memungkinkan Anda untuk menambahkan ikon (resizable) ikon tanpa memperlambat situs web Anda. Mereka dimuat seperti font web dan dapat ditata menggunakan CSS.

Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan font ikon dengan mudah di tema WordPress Anda, langkah demi langkah.

Apa itu Ikon Ikon dan Mengapa Anda Harus Menggunakannya?

Font ikon berisi simbol atau piktogram alih-alih huruf dan angka. Piktogram ini dapat dengan mudah ditambahkan ke konten situs web dan diubah ukurannya menggunakan CSS. Dibandingkan dengan ikon berbasis gambar, ikon font jauh lebih cepat yang membantu Anda secara keseluruhan Kecepatan situs WordPress.

Font ikon dapat digunakan untuk menampilkan ikon yang umum digunakan. Misalnya, Anda dapat menggunakannya dengan kereta Belanja, tombol unduh, kotak fitur, kontes gratis, dan bahkan di WordPress menu navigasi.

Ada beberapa font ikon sumber terbuka dan gratis yang tersedia yang memiliki ratusan ikon indah.

Faktanya, setiap instalasi WordPress dilengkapi dengan yang gratis dashicons ikon mengatur font. Ikon ini digunakan di menu admin WordPress dan area lain di dalamnya Area admin WordPress.

Beberapa font ikon populer lainnya adalah:

Demi tutorial ini, kita akan menggunakan Font Awesome. Ini adalah font ikon open-source gratis dan paling populer yang tersedia. Kami menggunakan FontAwesome di situs web WPBeginner dan juga plugin WordPress kami OptinMonster, WPForms, Tekan undian, dll.

Dalam panduan ini, kami akan membahas tiga cara untuk menambahkan font ikon di WordPress. Anda dapat memilih solusi yang paling sesuai untuk Anda.

Menambahkan Font Ikon di WordPress Menggunakan Plugin

Jika Anda adalah pengguna level pemula yang hanya mencoba menambahkan beberapa ikon ke posting atau halaman Anda, maka metode ini cocok untuk Anda. Anda tidak perlu mengubah file tema, dan Anda akan dapat menggunakan font ikon di mana saja di situs web Anda.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Font yang mengagumkan plugin untuk WordPress. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.

Setelah aktivasi, plugin ini memungkinkan dukungan Font Awesome untuk tema Anda. Anda sekarang dapat mengedit setiap posting atau halaman WordPress dan menggunakan shortcode ikon seperti ini:

[icon name=”rocket”]

Anda dapat menggunakan kode pendek ini bersama dengan teks lain atau dengan sendirinya dalam dedicated blok kode pendek.

Setelah ditambahkan, Anda dapat melihat pratinjau posting atau halaman Anda untuk melihat bagaimana ikon akan terlihat di situs langsung. Berikut ini tampilannya di situs pengujian kami.

Anda juga dapat menambahkan kode pendek ikon font di dalam blok paragraf dengan sendirinya di mana Anda dapat menggunakan pengaturan blok untuk meningkatkan ukuran ikon.

Saat Anda meningkatkan ukuran teks, ini mungkin terlihat aneh di dalam editor teks. Itu karena kode pendek tidak secara otomatis berubah menjadi font ikon di dalam editor blok.

Anda perlu mengklik tombol pratinjau pada posting atau halaman Anda untuk melihat bagaimana ukuran ikon yang sebenarnya akan terlihat.

Anda juga dapat menggunakan ikon shortcode di dalam kolom dan membuat kotak fitur seperti ini:

2. Menggunakan Font Ikon dengan Pembuat Halaman WordPress

Paling plugin pembangun halaman WordPress populer hadir dengan dukungan bawaan untuk font ikon. Ini memungkinkan Anda untuk dengan mudah menggunakan font ikon di halaman arahan Anda serta area lain di situs web Anda.

Pembuat Beaver

Pembuat Beaver adalah plugin pembangun halaman WordPress terbaik di pasar. Ini memungkinkan Anda untuk dengan mudah membuat tata letak halaman khusus di WordPress tanpa menulis kode apa pun.

Beaver Builder hadir dengan ikon-ikon cantik dan modul siap pakai yang bisa Anda seret dan jatuhkan ke pos dan halaman Anda.

Anda dapat membuat grup ikon, menambahkan satu ikon, dan memindahkannya ke baris dan kolom yang diposisikan dengan baik. Anda juga dapat memilih warna, latar belakang, jarak, dan margin Anda sendiri tanpa menulis CSS.

Anda bahkan bisa buat tema WordPress yang sepenuhnya khusus tanpa menulis kode apa pun menggunakan produk Themer dari Beaver Builder.

Elementor Pro

Elemen adalah plugin pembangun halaman WordPress lain yang populer. Itu juga dilengkapi dengan beberapa elemen yang memungkinkan Anda untuk 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.

Pembangun halaman populer lainnya suka Divi dan Komposer Visual juga memiliki dukungan penuh untuk font ikon.

3. Menambahkan Font Ikon di WordPress Secara Manual dengan Kode

Seperti yang telah kami sebutkan sebelumnya bahwa font ikon hanyalah font dan dapat ditambahkan ke situs Anda seperti yang akan Anda tambahkan font khusus.

Beberapa font ikon seperti Font Awesome, tersedia dari server CDN di seluruh web dan dapat ditautkan dari tema WordPress Anda secara langsung.

Anda juga dapat mengunggah seluruh direktori font ke folder di tema WordPress Anda dan kemudian menggunakan font-font itu di stylesheet Anda.

Karena kami menggunakan Font Awesome untuk tutorial ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat menambahkannya menggunakan kedua metode.

Metode 1:

Metode manual ini cukup mudah.

Pertama, Anda perlu mengunjungi Font yang mengagumkan situs web dan masukkan alamat email Anda untuk mendapatkan kode sematan.

Sekarang periksa kotak masuk Anda untuk email dari Font Awesome dengan kode embed Anda. Salin dan tempel kode sematan ini di file header.php tema WordPress Anda tepat sebelum menandai.

Kode embed Anda akan menjadi satu baris yang akan mengambil pustaka Font Awesome langsung dari server CDN mereka. Akan terlihat seperti ini:

Metode ini paling sederhana, tetapi dapat menyebabkan konflik dengan plugin lain.

Pendekatan yang lebih baik adalah dengan memuat JavaScript dengan benar di WordPress menggunakan mekanisme enqueueing bawaan.

Alih-alih menautkan ke stylesheet dari templat tajuk tema Anda, Anda dapat menambahkan kode berikut di tema Anda functions.php file atau dalam 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 itu akan memungkinkan Anda untuk meng-host ikon Font Awesome font di situs web Anda sendiri.

Pertama, Anda harus mengunjungi situs web Font Awesome untuk mengunduh paket font ke komputer Anda.

Cukup unduh font ikon dan unzip paket.

Sekarang, Anda harus terhubung ke internet Anda Hosting WordPress menggunakan sebuah Klien FTP dan pergi ke direktori tema WordPress Anda.

Anda perlu membuat folder baru di sana dan beri nama font. Selanjutnya, Anda perlu mengunggah konten folder ikon font ke direktori font di server hosting web Anda.

Sekarang Anda siap memuat font ikon ke dalam tema WordPress Anda. Cukup tambahkan kode ini ke file functions.php tema Anda atau di plugin khusus situs.

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 yang sebenarnya ke dalam tema WordPress Anda, posting, atau halaman.

Menampilkan Font Ikon Secara Manual di WordPress

Pergi ke Situs web Font Awesome untuk melihat daftar lengkap ikon yang tersedia. Klik ikon apa pun yang ingin Anda gunakan, dan Anda akan dapat melihat nama ikon tersebut.

Salin nama ikon dan gunakan seperti ini di WordPress.

Anda dapat memberi style pada ikon ini di stylesheet tema Anda seperti ini:

.fa-panah-alt-circle-up {
 ukuran font: 50px;
 warna: # FF6600;
 }

Anda juga dapat menggabungkan ikon yang berbeda bersama-sama dan menatanya secara bersamaan. Misalnya, katakanlah Anda ingin menampilkan daftar tautan dengan ikon di sebelahnya. Anda dapat membungkusnya di bawah a