Font ikon digunakan untuk menyertakan ikon standar tertentu dalam konten situs web Anda. NS Font 'Luar Biasa' adalah contoh bagus yang menawarkan banyak keunggulan dibandingkan font ikon lainnya. Kami juga menyarankan menggunakan Font ikon dari Freepik sebagai alternatif yang baik.
Font Awesome awalnya dirancang oleh Dave Gandy Untuk digunakan dengan Bootstrap Twitter. Font Awesome dapat digunakan dengan WordPress menggunakan Plugin Font Awesome Icons dirancang oleh Rachel Baker.
Berikut adalah pengantar singkat untuk font tersebut dan di mana font Awesome cocok dengan gaya yang mungkin masih dalam masa pertumbuhan.
Mengapa Menggunakan Font Ikon
Saat Anda mendesain situs web, gambar memakan banyak ruang web karena ukuran filenya. Mereka juga harus dipanggil ke halaman web Anda menggunakan markup HTML. Tidak hanya itu, tetapi penskalaannya sering menjadi masalah, kehilangan definisi karena ukurannya bertambah. Sebuah gambar biasa hanya menyelesaikan sebagaimana dimaksud bila digunakan dalam dimensi awalnya dirancang.
Saat Anda mencari gambar ikon standar, seperti untuk kendaraan, karakter tanda baca tertentu atau ikon grafik grafik, font ikon dapat menawarkan gambar terukur yang terlihat sama terlepas dari ukuran font. Ini sama seperti huruf dan angka tampak sama terlepas dari apakah Anda menggunakan ukuran font 2 atau 5 atau ukuran font 10 atau 24 poin.
Dalam banyak kasus, orang-orang tidak menggunakan gambar karena masalah ini, dan artikel atau laporan online mereka mengalami detail atau kejelasan karenanya. Dengan menggunakan Font Awesome, mereka dapat menambahkan ikon dasar ke situs mereka dan menskalakannya ke ukuran yang diperlukan, hanya dibatasi oleh dimensi dokumen mereka – dan mereka dapat melakukannya tanpa kehilangan definisi. Anda dapat melihat ikon yang dapat diskalakan dengan cara yang sama seperti karakter font yang dapat diskalakan.
Berikut adalah pilihan pemutar video dan ikon sosial yang tersedia:
Dan juga ikon baru yang datang dengan versi 3.0:
Masing-masing dapat ditingkatkan ukurannya tanpa kehilangan definisi. Anda dapat mengubah warnanya dan dengan mudah menambahkan bayangan dan mengubah transparansinya. Bahkan Anda dapat melakukan apa saja dengan mereka yang Anda bisa dengan gambar, dan kemudian beberapa, tanpa kekurangan ukuran file.
Pada dasarnya itulah yang dapat dilakukan oleh font ikon, dan font Awesome pada khususnya. Berikut adalah beberapa informasi tentang cara menggunakannya dan memanfaatkannya sebaik mungkin, dan juga satu atau dua kelemahan yang terkait dengan bagian depan ikon:
Menggunakan Font Luar Biasa
Dengan CSS Bootstrap Normal:
Font Awesome dapat digunakan dengan CSS Bootstrap default dengan menyalin direktori font Awesome ke dalam proyek Anda, lalu menyalin font-awesome.min.css ke dalam proyek. Anda kemudian harus membuka font-awesome.min.css dan mengedit jalur font untuk memastikan mereka mengarah ke lokasi Awesome.
Di bagian Head HTML Anda, lokasi font-awesome.min.css harus dirujuk sebagai berikut:
Jalur font menjadi relatif dari direktori CSS Anda.
Dengan Bootstrap Kurang:
Jika Anda menggunakan Twitter Bootstrap dengan CSS KURANG, maka pertama-tama salin direktori font Font Awesome ke proyek Anda, dan font-awesome-less ke direktori Bootstrap Less Anda. Kemudian:
- a) Buka bootstrap.less dan ganti @import "sprite.less"; dengan @import “font-awesome.less”;
- b) Buka font-awesome.less proyek Anda dan edit variabel @FontAwesomePath untuk menunjuk ke direktori font Anda.
@FontAwesomePath: "../font";
Jalur font relatif dari direktori CSS terkompilasi Anda.
Anda kemudian siap – meskipun jika Anda menggunakan kompiler statis, Anda harus mengkompilasi ulang KURANG.
Tidak Menggunakan Bootstrap:
Jika Anda tidak menggunakan Bootstrap, maka setelah menyalin file font ke direktori proyek Anda, Anda dapat menyalin salah satu dari dua file font-mengagumkan ke dalam proyek Anda, buka dan edit lokasi font untuk menunjuk ke direktori font.
Jika Anda menggunakan Internet Explorer 7, gunakan font-awesome-ie7.min.css
Cara Menggunakan Font Keren di WordPress
Ada dua cara mudah untuk menggunakan font ikon di WordPress satu Anda telah mengupload plugin*. Anda dapat menyematkannya menggunakan HTML, atau menggunakan kode pendek. Berikut adalah contoh masing-masing:
Menggunakan HTML: Di mana Anda ingin font muncul, cukup tambahkan nama item ke nama kelas sebagai berikut: [html] [/html]
akan menambahkan lingkaran hitam.
Anda dapat mengubah ukuran lingkaran sebagai berikut:
Anda mungkin akan merasa lebih mudah untuk menambahkan ukuran font ke stylesheet CSS Anda jika Anda ingin sering menggunakan ukuran ikon yang sama, dan format di atas untuk pengecualian.
Menggunakan Kode Pendek: Kode pendek lebih mudah, tetapi umumnya hanya akan berfungsi untuk konten posting dan halaman di layar editor posting. Formatnya adalah [icon name=icon-circle] di mana Anda menginginkan lingkaran.
Kelemahan Font Ikon
Font ikon tampak bagus untuk digunakan ketika Anda memiliki kebutuhan untuk menambahkan ikon tertentu ke blog atau situs web Anda, dan mereka dapat ditautkan untuk menjalankan fungsi tertentu. Namun, tidak semuanya sempurna, dan font ikon juga memiliki kekurangan. Ini adalah masalah umum yang dilaporkan oleh pengguna ikon font yang tidak berlaku untuk Font Awesome – itulah mengapa begitu 'Awesome!'
- Salah satunya adalah masalah potensial dengan pembaca layar yang mungkin membacakan ikon sebagai huruf abjad. Ini bukan masalah dengan Font Awesome karena cara karakter font diambil.
- Mereka dapat disajikan hanya dalam satu warna – atau dalam gradien warna menggunakan gradien CSS3. Apakah itu masalah asli dengan font ikon?
- Diperlukan waktu untuk membuat font khusus yang sesuai dengan kebutuhan Anda. Namun, sudah ada banyak pilihan font mengagumkan yang ditawarkan oleh Font Awesome, dan daftarnya terus diperluas. Meskipun ini adalah font sumber tertutup gratis, font yang disetujui yang dirancang oleh pengguna ditambahkan secara teratur.
Ringkasan Generator Keren Font
Generator Font Awesome adalah salah satu font ikon gratis terbaik yang tersedia saat ini. Meskipun dirancang untuk digunakan dengan Twitter Bootstrap, itu dapat disesuaikan untuk digunakan di situs web biasa dan ada juga plugin WordPress yang menawarkan yang terbaik dari font ikon ini. Jika Anda menggunakan font ikon, cobalah Font Awesome karena Anda mungkin akan terkejut setelah menguasainya.
* Plugin Font Awesome Icons WordPress tersedia dari https://github.com/rachelbaker/
Vivek Nath.R
Di blog saya, saya menggunakan plugin font Ikon Eksklusif Wp http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Keuntungannya adalah ia memiliki lebih banyak opsi penyesuaian seperti mengubah warna, ukuran, orientasi dll dan juga memiliki banyak ikon lainnya. Periksalah.
Rajesh Namase
Terima kasih Vivek telah berbagi plugin WordPress ini dengan pembaca kami.
James Dreesen
Hai Vivek, terima kasih telah berbagi plugin, saya sedang mencari sesuatu seperti ini. Saya juga akan mencoba Font Awesome Icons untuk melihat mana yang cocok untuk saya. Artikel bagus Rajesh, tolong lanjutkan! Semua yang terbaik untukmu.
Rajesh Namase
Coba juga gunakan plugin Font Awesome WordPress :)
Andy
Hai, saya baru saja mencari sesuatu seperti ini, karena saya terlalu malas untuk membuat semua kelas ini dan menambahkan gaya dan gambar ke dalam tema. Terima kasih!!
vipin
Terima kasih Vivek dan Rajesh, keduanya memberikan informasi yang saya cari.
rohit chougale
hai rajesh
'beri tahu saya tentang bisakah kita memutar video di php online jika ya, beri tahu saya caranya..
Rajesh Namase
Anda dapat mencoba menggunakan tag video HTML 5 :) Dan mudah menggunakan HTML 5 dengan PHP :)
vaibhav.dll
Saya pasti menambahkan plugin ini ke acc wordpress saya..
terima kasih admin..!
Anand Hittinali
baik saya bukan orang yang banyak bicara jadi plugin ini sangat membantu saya. terima kasih telah berbagi plugin ini.
Bunga bakung
Ada plugin untuk barang ini? Wow luar biasa pertama kali saya mendengarnya. Terima kasih telah berbagi ini.
Mohsin Ali
Plugin Rajesh yang sangat menarik dari mana Anda mendapatkan ide-ide unik ini.
David Croft
Halo,
terima kasih untuk blog yang bagus ini, karena topik "Icon Fonts" ini sangat baru bagi saya, jadi saya dapat mengetahui banyak hal baru dan kata-kata baru di dalam blog Anda.
Generator Font benar-benar font ikon gratis terbaik yang tersedia saat ini. jadi sangat bermanfaat.
David Johnson
FYI, Anda menggunakan istilah "generator Font Awesome" tetapi artikel Anda mencakup Font Awesome itu sendiri, bukan generator. Kata "generator" memiliki arti khusus dalam konteks font ikon. Contoh pembuat font ikon yang mendukung Font Awesome termasuk icnfnt dan Fontello.
Rajesh Namase
Oke, kami telah memperbarui judul artikel, terima kasih.
Carlton
Anda meninggalkan satu kelemahan signifikan dari font ikon: mereka tidak terdegradasi dengan anggun. Semua pengguna yang mengunduh font dinonaktifkan (karena mereka sadar keamanan, dulu sadar keamanan dan lupa, atau dikonfigurasi oleh orang lain yang sadar keamanan dan tidak sadar) hanya melihat simbol mesin terbang kosong yang jelek. Untuk menjadi pengguna font ikon yang bertanggung jawab, Anda harus menerima membuang pengguna tersebut ke bawah bus.
Ayush Agrawal
Artikel ini tampaknya agak lama tetapi saya ingin mengatakan bahwa cara yang baik untuk menggunakan font yang mengagumkan adalah menggunakan cdn-nya: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Membantu blogger yang ingin mengurangi waktu muat.
Vikas
Postingan yang bagus, Font Awesome adalah salah satu perkembangan terbaik di dunia desain.
Mark Fox
Terima kasih telah berbagi. Saya lebih cenderung menggunakannya sekarang.
Gaurav Dutt
Pria! 2013, bagaimana mungkin saya belum pernah melihat ini sebelumnya tetapi masih bekerja dengan sempurna untuk saya. Terima kasih untuk ini.