Cara Mudah Menambahkan Font Huruf 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 Anda, 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.

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

Beberapa font ikon populer lainnya adalah:

Font yang mengagumkan
Generik
IcoMoon
Linearicons
Ikon Material oleh Google
Proyek Noun
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 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.

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 plugin Font Awesome 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 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 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 diterbitkan 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 dengan mudah menggunakan font ikon 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 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 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 telah 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 harus mengunjungi situs web Font Awesome dan memasukkan 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 tag </head>.

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

1
<script src="https://use.fontawesome.com/123456abc.js"></script>

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 templat tajuk tema Anda, Anda dapat menambahkan kode berikut di file functions.php tema Anda atau di plugin khusus situs.

1
2
3
4
5
6
7
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 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

1
2
3
4
5
6
7
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

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

1
<i class="fa-arrow-alt-circle-up"></i>

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

1
2
3
4
.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 elemen <div> dengan kelas tertentu.

1
2
3
4
5
6
<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Sekarang Anda bisa menatanya di stylesheet tema Anda seperti ini:

1
2
3
4
5
6
7
.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 ikon di tema WordPress Anda. Anda mungkin juga ingin melihat tutorial kami tentang cara menambahkan ikon gambar dengan menu navigasi di WordPress.

Jika Anda menyukai artikel ini, silakan berlangganan YouTube Channel kami untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *