Cara Menambahkan Ikon Font Keren ke WordPress – Panduan Lengkap

Itulah yang panduan ini adalah semua tentang. Setelah selesai membaca, Anda akan tahu persis bagaimana:

• Tambahkan stylesheet Font Awesome secara manual ke WordPress
• Tambahkan Font Awesome ke WordPress dengan plugin gratis
• Sisipkan dan gaya Font Ikon mengagumkan dalam berbagai cara berbeda

Mari kita menggali…

Mengapa Anda Harus Meluangkan Waktu untuk Menambahkan Ikon Font Keren ke WordPress

Font Ikon mengagumkan sangat mengagumkan karena, seperti namanya, itu adalah font ikon, bukan gambar. Itu berarti Anda dapat melakukan hal-hal keren seperti:

• Ubah ukuran tanpa kehilangan kualitas karena ikonnya adalah vektor
• Ubah warna, tambahkan animasi, dan gunakan manipulasi CSS lainnya

Semua itu untuk mengatakan, ikon Font Awesome jauh lebih unggul daripada hanya menggunakan gambar statis.

Pertama, saya akan menunjukkan dua cara berbeda untuk menambahkannya ke situs Anda. Kemudian, saya akan menunjukkan kepada Anda bagaimana Anda dapat menata dan memanipulasi ikon Anda (tidak peduli metode mana yang Anda pilih).

Cara Menambahkan Ikon Font Keren Secara Manual ke WordPress

Jika pemikiran untuk menggali kode tema Anda membuat Anda takut, saya sarankan Anda melompat ke bagian berikutnya di mana saya akan menunjukkan cara menambahkan ikon Font Awesome ke WordPress menggunakan plugin gratis.

Jika tidak, saya suka metode ini untuk cara yang bagus dan ringan untuk menjalankan dan menjalankan Font Awesome.

Pada dasarnya, yang perlu Anda lakukan adalah menambahkan stylesheet Font Awesome ke tema WordPress Anda. Kemudian, Anda dapat mulai memasukkan ikon Font Awesome dan menatanya sesuka Anda.

Inilah cara kerja seluruh proses, langkah demi langkah:

Langkah 1: Enqueue Font Awesome Stylesheet di Tema WordPress Anda

Seperti yang saya katakan, langkah pertama Anda adalah menambahkan stylesheet Font Awesome CSS ke tema WordPress Anda. Meskipun Anda bisa mendapatkannya langsung dari situs web Font Awesome, metode pilihan saya adalah menggunakan versi yang dihosting di Bootstrap CDN.

Saat ini, tautan itu adalah:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Tapi itu akan berubah saat Font Awesome merilis versi baru. Jadi, sebaiknya perbarui tautan secara semi-reguler ke versi terbaru (meskipun versi yang lebih lama akan terus berfungsi).

Untuk menambahkan stylesheet ini ke WordPress, Anda perlu memasukkannya ke dalam file functions.php tema anak Anda. Meskipun metode dasar untuk menambahkan CSS adalah dengan meletakkan tautan di header Anda, ini adalah praktik terbaik untuk menggunakan fungsi enqueue WordPress khusus alih-alih meletakkan stylesheet langsung di header Anda.

Selain itu, menggunakan tema anak memastikan bahwa perubahan Anda tidak ditimpa jika Anda perlu memutakhirkan tema Anda.

Karena mengikuti praktik terbaik kode WordPress adalah hal yang baik, saya sangat menyarankan Anda menggunakan tema anak dan fungsi enqueue.

Oke, berikut cara membuatnya:

Buka Penampilan → Editor dan pilih file functions.php untuk tema anak Anda.

Kemudian, rekatkan dalam kode ini:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Pastikan untuk menyimpan perubahan Anda dan selesai! Tidak terlalu menyakitkan, bukan?

Langkah 2: Masukkan Ikon Font Keren

Setelah Anda mengantrekan stylesheet, Anda dapat memasukkan ikon Font Awesome ke situs Anda dengan membuka pencarian ikon Font Awesome dan menemukan ikon yang ingin Anda sisipkan:

Saat Anda mengklik ikon, Font Awesome akan memberi Anda kode yang Anda perlukan untuk menggunakan ikon:

Yang perlu Anda lakukan adalah menempatkan kode itu di tab Teks di Editor WordPress untuk menambahkan ikon ke situs Anda.

Dan itu saja! Anda telah berhasil menambahkan dukungan Font Awesome ke WordPress. Sekarang, yang tersisa adalah mempelajari cara menata ikon Font Awesome di situs WordPress Anda.

Tetapi sebelum saya menunjukkannya kepada Anda, saya ingin membahas metode plugin untuk menambahkan Dukungan Font Awesome. Jangan ragu untuk melompat ke depan jika Anda menggunakan metode manual daripada metode plugin.

Cara Menambahkan Ikon Font Keren ke WordPress Dengan Plugin

Jika Anda lebih suka menggunakan plugin daripada mengantrekan stylesheet Font Awesome secara manual, ada opsi gratis solid yang terdaftar di WordPress.org yang disebut Better Font Awesome.

Selain selalu menambahkan stylesheet terbaru ke situs Anda, Better Font Awesome juga:

• Memungkinkan Anda menggunakan kode pendek untuk menyematkan ikon Font Awesome.
• Memberi Anda menu tarik-turun di Editor TinyMCE untuk menyisipkan ikon.

Jika Anda berencana untuk menggunakan ikon Font Awesome secara teratur, kedua alat ini mungkin membuat hidup Anda lebih mudah. Namun untuk penggunaan yang jarang, menurut saya cara manual adalah pilihan yang paling sederhana karena paling ringan.

Langkah 1: Instal dan Aktifkan Plugin

Untuk menambahkan Font Awesome, yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin. Benar-benar tidak ada yang lain.

Meskipun ada panel pengaturan dasar yang dapat Anda akses dengan masuk ke Settings → Better Font Awesome , Anda benar-benar bebas untuk membiarkan semuanya sebagai default.

Langkah 2: Masukkan Ikon Font Keren

Untuk menyisipkan ikon Font Awesome dengan plugin, Anda memiliki dua opsi berbeda:

• Gunakan kode dari situs web Font Awesome seperti yang saya tunjukkan di bagian sebelumnya.
• Gunakan kode pendek, yang dapat dibuat dari drop-down.

Karena saya sudah menunjukkan kepada Anda metode pertama di bagian sebelumnya, saya hanya akan memberi Anda sekilas tentang generator kode pendek drop-down.

Saat Anda pergi untuk membuat posting atau halaman baru, Anda akan melihat tombol Insert Icon baru di sebelah tombol Add Media . Jika Anda mengkliknya, Anda akan melihat semua ikon Font Awesome yang tersedia, serta opsi untuk memfilter hasilnya:

Yang perlu Anda lakukan adalah mengklik ikon yang Anda pilih dan plugin akan memasukkan kode pendek yang tepat:

Dan hanya itu yang ada!

Sekarang setelah Anda memiliki dukungan ikon Font Awesome, mari gali beberapa cara di mana Anda dapat menata dan memanipulasi ikon Font Awesome Anda.

Cara Memberi Gaya Font Ikon Luar Biasa dan Mengubah Ukuran

Apa pun metode yang Anda gunakan untuk menambahkan Font Awesome ke WordPress, Anda akan menggunakan prinsip dasar yang sama untuk menata ikon Anda.

Selain itu, perintah ini berfungsi baik Anda menggunakan kode pendek atau kode sematan dari situs Font Awesome.

Sebagian besar tips ini diambil langsung dari halaman contoh Font Awesome, jadi Anda tidak perlu khawatir tentang kompatibilitas.

Ubah Ukuran Font Ikon Keren

Mari kita mulai dengan yang dasar – meningkatkan ukuran ikon Font Awesome Anda. Secara default, ikonnya cukup kecil, jadi ini pasti situasi yang mungkin Anda temui.

Untuk menambah ukuran ikon, Anda dapat menggunakan salah satu dari pengubah berikut:

• fa-lg – meningkatkan ukuran sebesar 33%
• fa-2x – ukuran ganda
• fa-3x – ukuran tiga kali lipat
• fa-4x – …
• fa-5x – …

Untuk menggunakan pengubah tersebut, Anda cukup menambahkannya setelah nama ikon (tetapi di dalam tanda kutip) untuk kode, dan di dalam tanda kutip kelas untuk kode pendek. Berikut adalah contoh melipattigakan ukuran ikon untuk kedua metode penyematan:

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [nama ikon = “unduh” class =” fa-3x “]

Misalnya, ini:

Menjadi ini di front-end:

Putar Font Ikon Keren

Anda juga dapat dengan mudah memutar ikon Font Awesome untuk mengubah orientasinya.

Berikut adalah pengubah untuk rotasi. Anda dapat menggunakan salah satu dari ini persis sama dengan pengubah ukuran di atas:

• fa-rotate-90 – berputar 90 derajat
• fa-rotate-180 – berputar 180 derajat
• fa-rotate-270 – berputar 270 derajat
• fa-flip-horizontal – membalik ikon di sepanjang sumbu horizontalnya
• fa-flip-vertical – membalik ikon di sepanjang sumbu vertikalnya

Tambahkan Animasi ke Font Awesome Icons

Anda juga dapat menambahkan beberapa animasi dasar ke ikon Anda. Font Awesome memberi Anda dua pengubah berbeda untuk menambahkan rotasi:

• fa-spin – menambahkan putaran yang mulus
• fa-pulse – membuat ikon berputar dalam 8 langkah berbeda

Animasi ini paling baik dipasangkan dengan ikon melingkar. Jika Anda menggunakan ikon berbentuk aneh lainnya, efeknya mungkin terlihat agak aneh.

Ubah Font Warna Ikon Luar Biasa

Terakhir, saya akan menunjukkan cara mengubah warna ikon Font Awesome. Sayangnya, tidak ada pengubah bawaan untuk ini. Sebagai gantinya, Anda harus menggunakan beberapa CSS khusus.

Namun jangan khawatir – ini sangat sederhana.

Yang Anda butuhkan hanyalah kode kecil ini:

.fa-NAME {
color: COLOR;
}

Di mana fa-NAME adalah nama sebenarnya dari ikon Anda dan COLOR adalah warna yang ingin Anda ubah.

Untuk tetap menggunakan ikon unduhan dari contoh kami sebelumnya, berikut cara Anda mengubahnya menjadi merah:

Anda dapat dengan mudah menambahkan CSS khusus dengan membuka Appearance → Customizer → Additional CSS .

Membungkus Semuanya

Font Ikon mengagumkan mungkin memerlukan waktu beberapa menit untuk menyiapkannya. Tapi begitu Anda menginstalnya, mereka ada di sana untuk selamanya. Sejak saat itu, yang perlu Anda lakukan untuk menyisipkan dan menata ikon Font Awesome individual adalah mengikuti langkah-langkah di atas.

Perlu diketahui – jika Anda menggunakan metode manual, Anda akan ingin masuk secara berkala dan memperbarui tautan ke stylesheet untuk tetap mengikuti versi terbaru.