Cara Mudah Menambahkan Ikon 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 kecepatan keseluruhan situs web WordPress Anda.

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

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

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

Beberapa font ikon populer lainnya adalah:

Demi tutorial ini, kita akan menggunakan Font Awesome. Ini adalah font ikon sumber bebas dan sumber terbuka 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 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 tentang cara memasang plugin WordPress.

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

(nama ikon = "roket")

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

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

Plugin pembuat halaman WordPress paling populer datang 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 Beaver

Beaver Builder adalah plugin pembuat halaman WordPress terbaik di pasaran. Ini memungkinkan Anda untuk dengan mudah membuat tata letak halaman khusus di WordPress tanpa menulis kode apa pun.

Beaver Builder hadir dengan ikon-ikon indah 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, spasi, dan margin Anda sendiri tanpa menulis CSS.

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

Elementor Pro

Elementor 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.

Pembuat halaman populer lainnya seperti Divi dan Visual Composer juga memiliki dukungan penuh untuk font ikon.

3. Menambahkan Font Ikon di WordPress Secara Manual dengan Kode

Seperti yang kami sebutkan sebelumnya bahwa font ikon hanya font dan dapat ditambahkan ke situs Anda seperti Anda akan menambahkan 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 memuat JavaScript di WordPress menggunakan mekanisme enqueueing bawaan.

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

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

Cukup unduh ikon ikon dan unzip paket.

Sekarang, Anda harus terhubung ke hosting WordPress Anda menggunakan 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 menata ikon ini di stylesheet tema Anda seperti ini:

 .fa-arrow-alt-circle-up { 
 font-size:50px; 
 color:#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

 

   Home
   Library
   Applications
   Settings
 
 

 .icons-group-item i { 
 color: #333; 
 font-size: 50px; 
 } 
 .icons-group-item i:hover { 
 color: #FF6600
 }