Sebelumnya kita sudah membahas artikel tentang Membuat Login System Dengan PHP & MySQL. Pada kali ini kita akan membahas artikel tentang Menambahkan Font Awesome Pada Projek Web, Font Awesome memudahkan kita untuk menggunakan icon pada website berbentuk vector. Show
 Kelebihan Font Awesome
How to useUntuk menggunakan font awesome ikut dan pahami langkah-langkah dibawah ini.
3. Panggil font awesome pada tag <head>. <head>4. Tambahkan icon pada halaman website seperti ini: <i class="fa fa-user"></i>NotesUntuk menambahkan icon, gunakan tag <i> dan tambahkan class “fa” seteleah class “fa” lalu tambahkan class nama icon. Contoh diatas adalah: “fa” adalah class dari font awesome nya dan fa-user adalah nama iconnya. Untuk mendapatkan nama icon kamu bisa cek disini jon! http://fontawesome.io/icons/ Final WordsOk jon, kita sudah membahas artikel tentang Menambahkan Font Awesome Pada Projek Web. Semoga bermanfaat dan sampai jumpa Bila kamu ingin menambahkan ikon, Font Awesome adalah salah satu pilihan yang harus kamu coba. Dengan Font Awesome, kamu dapat memilih ratusan ikon berkualitas tinggi untuk ditambahkan pada menu navigasi, widget, hook, hingga pos dan laman. Pada artikel kali ini, kita akan belajar cara memasang dan menggunakan Font Awesome pada website WordPress. Gambar adalah elemen penting yang sudah sangat lumrah digunakan pada hampir semua website. Tidak hanya untuk mempercantik website, penggunaan gambar juga digunakan untuk mempertegas atau bahkan mengganti peran elemen website lainnya. Contoh yang paling jelas dapat kamu lihat pada beberapa website yang menggunakan gambar pada menu navigasi, search bar, hingga gambar loading. Seiring perkembangan web design, penggunaan gambar dengan format tradisional memiliki kekurangan bila digunakan untuk hal tersebut. Trend yang ada saat ini adalah dengan menggunakan icon font seperti Font Awesome.
Apa itu icon font?Font seperti Times New Roman, Comic Sans, hingga Roboto atau Open Sans, adalah font tradisional yang biasa kita gunakan dalam membuat sebuah tulisan. Selain angka dan huruf, font semacam ini juga memiliki beberapa karakter khusus agar kamu dapat mudah menggunakan simbol. Tapi berbeda dengan font biasa, icon font, seperti namanya, hanya terdiri dari ikon atau simbol saja. Bila digunakan untuk menulis mungkin kamu akan kesulitan karena font ini tidak memiliki angka dan huruf. Setiap icon font memiliki keunikan masing-masing dari mulai banyaknya ikon, style masing-masing ikon, hingga variasi ikon. Namun umumnya icon font memiliki simbol umum yang sering dijumpai pada sebuah website seperti ikon sosial media, ikon layanan online, ikon navigasi, ikon transportasi, dll. Dan salah satu web icon font terpopuler adalah Font Awesome yang memiliki ratusan ikon yang dapat dengan mudah digunakan untuk mempercantik tampilan sebuah website. Apa kelebihan icon font seperti Font Awesome?Penggunaan gambar adalah hal yang lazim dilakukan untuk mempercantik tampilan website. Tidak hanya itu, gambar juga kadang digunakan sebagai elemen pelengkap sebuah web. Seperti pada contoh toolbar WordPress di mana kamu bisa melihat ikon pada setiap menu. Namun penggunaan gambar pada skenario semacam ini memiliki banyak kekurangan seperti ukuran yang cukup besar (dibandingkan teks) dan tampilan yang menjadi blur ketika diperbesar. Di sinilah penggunaan icon font menjadi solusi yang lebih baik, tidak hanya untuk menampilkan gambar sederhana tetapi juga meningkatkan usability (kegunaan) pada sebuah website[1]. Lalu, apa alasan lain kenapa icon font seperti seperti Font Awesome menjadi pilihan yang lebih baik?
Sekarang kamu sudah tahu manfaatnya, saatnya memasang Font Awesome pada website WordPress. Pasang Font Awesome pad website WordPress dengan plugin Better Font AwesomeIni adalah cara termudah untuk menambahkan Font Awesome pada website WordPress. Bila kamu lebih suka untuk melakukannya secara manual, silahkan lewati bagian ini. Dengan 70,000 lebih instalasi aktif dan rating rata-rata 4.96, Better Font Awesome adalah plugin terpopuler untuk menambahkan Font Awesome pada website WordPress. Selain itu, plugin ini juga selalu mengikuti update Font Awesome sehingga kamu bisa selalu menggunakan versi terbarunya. Penggunakan CDN (Content Delivery Newtwork) juga memastikan Font Awesome dapat diakses dengan cepat. Langkah #1 – Install dan aktifkan plugin Better Font AwesomeMasuk ke menu Plugin » Add New lalu cari Font Awesome pada search box. Setelah kamu menemukan plugin Better Font Awesome, klik tombol Install dan aktifkan. Langkah #2: Mengubah konfigurasi plugin (optional)Setelah diaktifkan, akan ada menu konfigurasi yang dapat kamu ubah melalui menu Setting » Better Font Awesome. Di sini kamu dapat melakukan perubahan yang kamu rasa perlu meskipun plugin ini akan tetap dapat bekerja dengan baik menggunakan settingan defaultnya. Menu pengaturan yang dapat kamu ubah antara lain:
Setelah selesai, klik tombol Save Settings. Langkah #3: Menambahkan ikon Font Awesome pada website WordPressAda tiga cara yang bisa kamu gunakan untuk menambahkan ikon Font Awesome dengan plugin Better Font Awesome. 1. Menambahkan Font Awesome dengan kode HTMLIni adalah cara universal yang bisa digunakan untuk menambahkan Font Awesome pada pos WordPress. Dengan cara ini, tidak masalah bila kamu menggunakan plugin atau cara manual, selama Font Awesome sudah terpasang pada website WordPress. Untuk melihat ikon apa saja yang bisa kamu gunakan, masuk ke website Font Awesome dan cari ikon yang kamu inginkan. Gunakan search box untuk mempercepat pencarian. Setelah selesai klik ikon yang sudah kamu pilih. Setelah itu, kamu akan diarahkan ke laman yang berisi gambar ikon tersebut dalam berbagai ukuran. Selain itu akan ada potongan kode yang akan kita butuhkan untuk menampilkan gambar ikon tersebut pada website WordPress. Setelah itu, kamu hanya perlu mengkopi dan menyalin kode tersebut pada editor pos. Ingat untuk mengubahnya dalam mode Text! Ini adalah contoh hasil penggunaan kode di atas. 2. Menambahkan Font Awesome dengan shortcodeDengan menggunakan plugin Better Font Awesome, kamu dapat memasukan ikon menggunakan shortcode bawaan plugin tersebut. Untuk menampilkannya, cukup gunakan shortcode dengan format
Meskipun nampak mudah, saya tidak merekomendasikan cara ini karena ini bisa membuat pos menjadi berantakan bila kamu memutuskan untuk mencopot plugin Better Font Awesome. 3. Menambahkan Font Awesome melalui shortcode generator pada editor posCara ini memilki prinsip yang sama dengan cara sebelumnya di mana ikon Font Awesome dapat ditampilkan dengan shortcode. Bedanya, shortcode pada cara ini akan dibuat secara otomatis dan kamu hanya perlu memilih ikon yang akan ditampilkan. Sekali lagi saya tidak merekomendasikan cara ini kecuali kamu rutin menggunakan plugin Better Font Awesome. Menambahkan Font Awesome pada website WordPress secara manualAda dua cara yang bisa kamu lakukan untuk menambahkan Font Awesome pada website WordPress secara manual. Cara pertama adalah dengan mengunduh Font Awesome dan menguploadnya menggunakan FTP Client atau File Manager pada cPanel. Cara lain adalah dengan menggunakan resources yang telah disediakan oleh Bootstrap CDN. Untuk cara penggunaannya sendiri akan sama dengan cara di atas menggunakan kode HTML. Metode #1 – Menambahkan Font Awesome dengan link dari Bootstrap CDNIni adalah cara yang lebih mudah untuk menambahkan Font Awesome secara manual karena kamu tidak perlu mengunduh atau mengupload Font Awesome terlebih dahulu untuk bisa menggunakannya. Dan penggunaan CDN (Content Delivery Network) akan memastikan Font Awesome dapat diakses dengan cepat untuk segera ditampilkan pada website WordPress. Pada beberapa tutorial cara untuk menambahkan Font Awesome pada WordPress adalah dengan menambahkan kode berikut pada file <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" > Meskipun begitu, ini bukanlah cara yang disarankan karena dapat menyebabkan konflik dengan plugin lainnya. Cara terbaik untuk menggunakan Font Awesome adalah dengan menambahkan kode berikut pada file function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');Untuk melakukannya, masuk ke menu Tamplilan » Editor lalu cari file CATATAN: Font Awesome masih secara reguler diupdate jadi mungkin kamu juga harus mengganti link di atas secara berkala. Pada contoh di atas, link yang digunakan masih menggunakan Font Awesome versi 4.7 yang menjadi rilis terakhir ketika artikel ini dibuat. Meskipun begitu versi lama juga akan tetap bekerja dengan baik karena biasanya update dilakukan untuk menambahkan font/ikon baru. Metode #2 – Menambahkan Font Awesome secara manual pada direktori WordPressBerbeda dengan metode pertama, dengan cara ini kamu harus menambahkan dulu Font Awesome langsung pada direktori WordPress sebelum bisa digunakan. Untuk melakukannya, download Font Awesome lalu unzip menggunakan WinRAR atau 7Zip. Setelah itu, letakan folder tersebut pada folder tema yang kamu gunakan menggunakan FTP Client seperti FileZilla atau File Manager bawaan cPanel. Setelah selesai, kamu hanya perlu menambahkan kode berikut pada file function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/font-awesome-4.7.0/css/font-awesome.min.css' );
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');Sebagai catatan, kode di atas mungkin sedikit berbeda tergantung nama folder Font Awesome dan dimana kamu meletakannya. Pada contoh di atas, folder Font Awesome yang saya ekstrak bernama Cara memodifikasi ikon Font AwesomeSeperti disebutkan sebelumnya, icon font seperti Font Awesome dapat dimanipulasi dengan mudah seperti font biasa. Ini artinya kamu dapat mengubah ukurannya, mengganti warnanya, hingga menambahkan animasi. Untuk info lebih lengkap kamu bisa melihat contoh modifikasi yang dapat dilakukan pada ikon Font Awesome di sini. 1. Mengubah ukuran ikon Font AwesomeBila setelah dipasang kamu merasa ikon yang digunakan terlalu kecil, kamu dapat menyesuaikannya agar Font Awesome terlihat lebih rapih. Untuk mengubah ukuran ikon, kamu bisa menggunakan perintah berikut::
Bila kamu menggunakan kode HTML, maka kode Font Awesome dapat ditulis dengan format sebagai berikut: <i class="fa fa-fort-awesome fa-lg"></i> <i class="fa fa-fort-awesome fa-2x"></i> <i class="fa fa-fort-awesome fa-3x"></i> <i class="fa fa-fort-awesome fa-4x"></i> <i class="fa fa-fort-awesome fa-5x"></i> Untuk plugin Better Font Awesome, kamu dapat menulisnya dalam format berikut: [icon name="fort-awesome" class="fa-lg"] [icon name="fort-awesome" class="fa-2x"] [icon name="fort-awesome" class="fa-3x"] [icon name="fort-awesome" class="fa-4x"] [icon name="fort-awesome" class="fa-5x"] Setelah selesai, kamu dapat melihat perubahan seperti ini: » fa-lg 2. Menambahkan animasi pada ikon Font AwesomeAda animasi sederhana berupa rotasi yang bisa kamu tambahkan pada ikon Font Awesome. Animasi rotasi ini terdiri dari dua modifier, yaitu:
Sebagai
catatan, efek ini akan terlihat bagus bila digunakan pada ikon berbentuk bundar seperti Untuk melakukannya, cukup tambah modifier fa-spin atau fa-pulse sehingga kode HTML Font Awesome menjadi seperti ini: <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> Untuk pengguna plugin Better Font Awesome, cukup gunakan shortcode dengan format berikut: [icon name="spinner" class="fa-spin"] [icon name="spinner" class="fa-pulse"] 3. Memutar (rotate) ikon Font AwesomeKamu dapat juga memutar ikon FOnt Awesome dan mengubah orientasinya. Yang harus kamu lakukan hanya menambahkan kode berikut /*memutar ikon 90 derajat*/ <i class="fa fa-shield fa-rotate-90"></i> /*memutar ikon 180 derajat*/ <i class="fa fa-shield fa-rotate-180"></i> /*memutar ikon 270 derajat*/ <i class="fa fa-shield fa-rotate-270"></i> /*membalik ikon secara horizontal*/ <i class="fa fa-shield fa-flip-horizontal"></i> /*membalik ikon secara vertikal*/ <i class="fa fa-shield fa-flip-vertical"></i> Bila kamu menggunakan plugin Better Font Awesome, maka shortcode plugin tersebut akan tampak seperti berikut: [icon name="shield" class="fa-rotate-90"] 4. Menggabungkan beberapa efek sekaligus pada Font AwesomeSemua modifikasi yang dapat dilakukan pada Font Awesome dapat dilakukan sekaligus dalam satu baris kode saja. Misalnya saja kamu ingin mengubah ukuran sebuah ikon lalu memutarnya 90 derajat, kamu bisa menulis kode berikut: <i class="fa fa-shield fa-5x fa-rotate-90"></i> Hal yang sama juga dapat dilakukan pada shortcode plugin Better Font Awesome. <icon name="shield" class="fa-5x fa-rotate-90"></i> 5. Mengubah warna ikon Font Awesome dengan custom CSSUntuk mengubah warna ikon Font Awesome caranya mungkin akan sedikit tricky karena tidak ada fungsi khusus untuk itu. Karena itulah kita akan menggunakan custom CSS. Dengan menggunakan custom CSS, semua yang bisa kamu lakukan dengan font biasa, dapat kamu lakukan pada Font Awesome, termasuk mengubah warna ikon Font Awesome. Misalnya saja kamu menggunakan kode HTML Font Awesome berikut: <i class="fa fa-user-circle"></i> Bila kamu ingin mengubah ikon tersebut menjadi merah, kamu hanya perlu menambahkan kode CSS di bawah ini. Kode CSS pada WordPress dapat dimasukan melalui menu Appearance » Customizer » Additional CSS. .fa-user-circle {
color: red;
}Sebagai catatan, bila kamu menggunakan ikon tersebut di beberapa tempat, kode ini akan mengubah tampilan semua ikon tersebut. Untuk melakukan perubahan pada satu tempat saja, gunakan tag <id=”nama-id”> sehingga kode Font Awesome menjadi, <i class="fa fa-user-circle" id="ikon-user"></i> Dengan begitu, kode custom CSS yang kita gunakan menjadi, #ikon-user {
color: red;
}PenutupSaya harap tutorial ini bisa membantu kamu memasang dan menggunakan Font Awesome pada website WordPress. Sedikit saran untuk kamu yang menambahkan Font Awesome secara manual, jangan lupa untuk mengupdatenya. Meskipun bukan masalah serius, ikon Font Awesome bisa tidak muncul bila ikon tersebut tidak ada pada versi yang kamu gunakan. Selain itu buat tema anak (child theme) agar Font Awesome tidak hilang bila kamu mengupdate tema yang kamu gunakan. SUMBER: |
Cara menggunakan icon php fa
Pos Terkait
Copyright © 2024 idkuu.com Inc.
