Cara Menggunakan Ikon Font Keren Di WordPress

Diterbitkan: 2022-10-14

Jika Anda ingin menggunakan ikon Font Awesome di situs WordPress Anda, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Font Awesome Icons. Untuk informasi lebih lanjut, lihat artikel kami tentang cara menginstal plugin WordPress. Setelah plugin diaktifkan, Anda perlu mengedit tema WordPress Anda untuk menyertakan file CSS Font Awesome. Cara termudah untuk melakukannya adalah dengan menambahkan kode berikut ke file functions.php tema Anda: add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); function enqueue_font_awesome() { wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' ); } Kode ini akan memuat file CSS Font Awesome dari CDN Bootstrap. Jika mau, Anda dapat mengunduh file Font Awesome CSS dan menyimpannya di server Anda sendiri. Setelah file Font Awesome CSS dimuat, Anda dapat mulai menggunakan ikon di situs WordPress Anda. Misalnya, Anda dapat menambahkan ikon ke menu Anda seperti ini: Kontak Rumah Anda juga dapat menggunakan ikon Font Awesome di konten Anda. Misalnya, Anda dapat menambahkan ikon ke daftar seperti ini: Ini adalah item satu Ini adalah item dua Ini adalah item tiga Dan Anda dapat menambahkan ikon ke tautan seperti ini: Ikuti saya di Twitter Kemungkinannya tidak terbatas! Untuk informasi selengkapnya, lihat situs web Font Awesome.

Akibatnya, menggunakan perpustakaan Font Awesome di situs WordPress Anda relatif sederhana. Anda akan dapat mengurangi waktu buka halaman setelah mengikuti langkah-langkah sederhana ini. Tidak perlu menggunakan ikon sebagai font untuk situs Anda. Mereka dapat diedit dengan cara apa pun yang biasanya dapat Anda sertakan dalam font. Plugin Font Awesome WordPress cocok untuk orang yang tidak nyaman masuk ke tema atau file mereka untuk memasukkan kode yang diperlukan. Paket Pro mencakup 1.500 ikon gratis, serta lebih dari 5.000 variasi. Anda dapat menambahkan ikon apa pun yang Anda inginkan dengan mengetik dan/atau mengedit class=fab fa-wordpress ke dalam bahasa apa pun.

Di dashboard WP Anda, klik Appearance – Editor, lalu file header.php. Periksa posisi baris yang berisi kode sebelum mengkliknya, lalu tempel kode yang sama dari Font Awesome. Ini akan memerlukan penggalian ke dalam file Inti tema Anda, tetapi ini akan menjadi proses yang sederhana dan cepat. Setelah Anda menginstal Font Awesome, Anda harus memastikan ikon diposisikan dengan benar. Dimungkinkan untuk memasukkan gaya dalam lembar gaya Anda atau melakukannya sebaris. Warna dan ukuran adalah dua gaya yang paling umum digunakan. Anda dapat memodifikasi ikon dalam <div> sendiri untuk membuatnya berfungsi dalam batasan Anda jika Anda membutuhkannya relatif terhadap ukuran tertentu tetapi nilai absolutnya tidak.

Opsi menu Font Awesome Icon dapat ditemukan di bilah format yang diperluas saat Anda berada di blok teks Gutenberg (atau di atas bilah format di editor WordPress Classic). Icon Chooser memungkinkan Anda untuk mencari ikon Font Awesome berdasarkan nama ikon, kategori, atau kata kunci.

Bagaimana Saya Menggunakan Font Awesome Di Tema WordPress?

Kredit: www.elegantthemes.com

Jika Anda ingin menggunakan Font Awesome di tema WordPress Anda, ada beberapa cara yang bisa Anda lakukan. Salah satu caranya adalah dengan menggunakan plugin seperti Better Font Awesome , yang akan memberi Anda halaman pengaturan di mana Anda dapat dengan mudah mengaktifkan atau menonaktifkan ikon Font Awesome di situs Anda. Cara lain adalah menambahkan kode Font Awesome secara manual ke tema Anda. Anda dapat menemukan kode untuk setiap ikon di situs web Font Awesome. Setelah Anda memiliki kode, Anda dapat menambahkannya ke file CSS tema Anda atau di mana pun Anda ingin memasukkannya.

Tim di Font Awesome telah membuat tutorial baru tentang cara menggunakan elemen semu ::before untuk menambahkan ikon ke halaman Anda menggunakan CSS di versi 4.7 aplikasi mereka. Dengan menggunakan tutorial ini, Anda tidak perlu menggunakan gambar atau menyalin dan menempelkan kode untuk menambahkan ikon ke halaman Anda.
Jika Anda menginstal Font Awesome versi Gratis, Anda mungkin kehilangan beberapa Ikon di versi Pro. Jika ini bukan pilihan, Anda bisa mendapatkan ikon gratis alternatif atau meningkatkan ke langganan Pro.
Jika Anda ingin menambahkan ikon ke halaman Anda tanpa harus menggunakan gambar atau kode, metode pseudoelement ::before adalah pilihan yang bagus. Menggunakan elemen semu ini sederhana jika Anda mengikuti tutorial yang disediakan oleh Font Awesome, dan Anda juga dapat menambahkan ikon ke halaman Anda.

Bisakah Saya Menggunakan Font Awesome Secara Komersial?

Font Awesome sepenuhnya open source dan dilengkapi dengan lisensi GPL. Program ini dapat digunakan untuk proyek apa pun, dari komersial hingga open source hingga murni pribadi.

Bagaimana Saya Menambahkan Font Awesome ke WordPress Tanpa Plugin?

Kredit: readyship.co

Cara Menambahkan Font Keren ke WordPress Anda Tanpa plugin Anda dapat menambahkan ikon secara manual dengan membuka pustaka ikon Font Awesome dan memilih dari pilihan font yang tersedia. Anda bisa mendapatkan kode sematan dengan mengirimkan tautan ke tema Anda melalui email.

Ikon dapat ditambahkan ke WordPress tanpa pengetahuan tentang pemrograman atau desain. Ikon Font sepenuhnya dapat disesuaikan dan responsif, dan beberapa di antaranya telah menggantikan gambar tradisional atau lembar Sprite. Saat ini diinstal di lebih dari 80.000 komputer dan kompatibel dengan versi WordPress terbaru. Ikon dapat diubah sesering font sehari-hari biasa. Anda dapat mengubah warna, perataan, tinggi, gaya, dan sebagainya dengan opsi ini. Hampir setiap browser mendukung ikon font. Karena ada begitu banyak ikon font yang tersedia, penggunaan gambar di situs web kami terbatas.

Mayoritas desainer telah berhenti menggunakan gambar tradisional dan menggantinya dengan ikon Font Awesome. Ikon adalah alat luar biasa yang dapat dimodifikasi dengan berbagai cara. Saat Anda mengubah ukuran ikon, memutarnya, mengubah warnanya, atau melakukan tindakan lain, Anda juga dapat membuatnya lebih fleksibel. Kode di bawah ini harus disalin dan ditempelkan ke editor WordPress Anda. Bagaimana Anda membuat Font Awesome berfungsi di Elementor? Tidak perlu mengubah file inti atau menginstal plugin apa pun untuk tema Anda. Ikon untuk font mengagumkan sudah ada di versi premium Elementor. Better Font Awesome akan memungkinkan Anda untuk menggunakan shortcode yang dibuat dengan plugin Font Awesome Icons dan Font Awesome Shortcodes .

Mengubah pengaturan CDN di plugin Font Awesome adalah semua yang diperlukan untuk menyajikan ikon khusus. Anda juga dapat menggunakan konfigurasi CDN Anda sendiri daripada menggunakan Font Awesome CDN default. Jika Anda hanya ingin menggunakan ikon Gratis dasar, kecil kemungkinan Anda perlu membuat perubahan apa pun pada konfigurasi default. Setelah mengunduh file zip gratis dari situs web resmi font awesome, ekstrak dan tautkan ke halaman Anda. Dalam dokumentasi plugin, ada banyak informasi tentang cara mengatur CDN Anda sendiri.

Font Awesome: Plugin WordPress yang Harus Dimiliki Untuk Situs Web Anda

Plugin Font Awesome WordPress memungkinkan Anda untuk menggunakan perpustakaan ikon di situs web Anda. Jika Anda tidak terbiasa dengannya, Anda dapat menyesuaikan pengaturannya dengan membuka halaman pengaturan plugin. Untuk memulai, Anda harus terlebih dahulu menginstal plugin Font Awesome di situs WordPress Anda. Kemudian, di pengaturan plugin, pilih Gunakan Kit. Anda dapat menggunakan ikon plugin dengan CDN tertentu dengan melakukannya. Tidak ada perubahan yang diperlukan jika Anda hanya memerlukan ikon dasar.


Tambahkan Font Keren Ke WordPress Tanpa Plugin

Menambahkan Font Awesome ke WordPress tanpa plugin adalah proses yang cukup sederhana. Pertama, Anda harus mengunjungi situs web Font Awesome dan mengunduh versi terbaru perpustakaan Font Awesome. Selanjutnya, Anda harus mengunggah perpustakaan Font Awesome ke situs WordPress Anda. Cara termudah untuk melakukannya adalah dengan menggunakan klien FTP. Setelah perpustakaan Font Awesome diunggah ke situs WordPress Anda, Anda harus menambahkan beberapa baris kode ke file functions.php tema WordPress Anda. Kode yang perlu Anda tambahkan adalah:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
fungsi enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}
Menambahkan Font Awesome ke WordPress tanpa plugin adalah proses yang cukup sederhana. Kode yang perlu Anda tambahkan adalah:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
fungsi enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}

Dengan menggunakan langkah-langkah di bawah ini, Anda dapat menambahkan Font Awesome ke situs WordPress Anda. Metode yang paling umum untuk melakukannya adalah internal atau eksternal. Yang paling penting adalah memastikan bahwa font dimuat dengan benar. Jika font dan tautan tidak dikonfigurasi dengan benar, atau jika ikon tidak muncul sama sekali. Sangat mudah untuk menggunakan Font Awesome karena hanya perlu beberapa baris untuk menyalin dan menempel. Jika Anda menggunakan Sass atau Less, Anda perlu mengunduh folder font-awesome dan meletakkannya di root proyek. Beberapa plugin tersedia untuk membantu Anda dalam proses instalasi. Anda mungkin ingin membuat plugin Anda sendiri yang dapat digunakan pada banyak proyek dan tema.

Cara Menggunakan Ikon Font Keren Di WordPress

Cukup pilih ikon Font Awesome dari menu WordPress. Sangat mudah untuk menambahkan ikon ke halaman mana pun dengan menambahkan *i class=fab fa-wordpress*/i. Periksa perpustakaan ikon untuk saran tentang apa yang harus disertakan. Penting untuk dicatat bahwa kode pendek dalam plugin tidak selalu berfungsi.

Berikut cara menggunakan Font Awesome Icons di situs WordPress Anda di (2121). Ini adalah salah satu perpustakaan ikon paling populer di Web. Bagaimana Anda bisa mengonfigurasi Font Awesome di WordPress dengan berbagai cara? Anda akan belajar bagaimana mengintegrasikan Font Awesome dengan WordPress dengan mulus di artikel ini. Jika Anda tidak tahu cara menggunakan ikon Font Awesome di situs web Anda, menghostingnya di server Anda adalah pilihan terbaik. Satu-satunya file yang dapat ditambahkan adalah yang akan Anda gunakan di situs WordPress Anda jika Anda meng-host ikon sendiri. Apa yang membuat Font Awesome menonjol sebagai paket ikon adalah kemampuannya untuk menyesuaikan dan mengubah tampilan ikon.

Pengguna WordPress dapat mengakses Font Awesome menggunakan metode berikut. Jika Anda tidak memiliki pengalaman pengkodean, menyesuaikan ikon bahkan lebih sulit. Plugin blok Gutenberg Stackable, yang diinstal sebagai unduhan gratis, dapat digunakan dengan Font Awesome untuk membuatnya lebih mudah digunakan. Fitur Stackable memungkinkan Anda memilih desain premium yang dibuat sebelumnya yang konsisten dengan kualitas ikon Font Awesome. Anda dapat mengakses ikon akun Font Awesome Pro mana pun dengan membuka blok ikon. Stackable akan menangani proses pendaftaran untuk Anda, jadi tidak perlu mendaftar akun atau membuat Kode Kit. Tidak perlu memiliki pengetahuan pengkodean untuk mengubah tampilan ikon. Ini hanya tersedia bagi mereka yang membeli paket Gratis dan Pro.

Jika Anda tidak menggunakan Font Awesome Pro, Anda harus mencari ikon gratis di daftar ikon Font Awesome Standard . Jika Anda menggunakan Font Awesome Pro, Anda harus merujuk awalan gaya yang benar serta file pendukung. Jika Anda menggunakan panduan gaya, Anda bisa merasakan cara menggunakan Font. Berikut adalah beberapa ikon Pro yang hebat. Jika Anda memiliki langganan Font Awesome Standard atau lebih tinggi, Anda juga harus menggunakan ikon Pro.