Font Awesome: Panduan Perpustakaan Lengkap

Ikon Font Font Awesome: Apa itu dan apa yang digunakan. Cara menghubungkan ikon ke situs. Keuntungan dan kerugian dari perpustakaan.

Font Ikon Awesome Set: Panduan Ultimate

Font Awesome adalah satu set font dan ikon berdasarkan pada CSS dan kurang. Alat ini memungkinkan Anda untuk dengan cepat menghubungkan semua jenis ikon ke situs, secara signifikan meningkatkan desain dan kegunaannya. Cukup memasukkan beberapa baris kode.

Font Awesome memberi Anda ikon vektor yang dapat diskalakan yang dapat dengan mudah Anda personalisasi - ukuran, warna, bayangan, dan segala sesuatu yang dapat dilakukan dengan CSS.

Font Library Awesome memiliki koleksi besar saran terbaik untuk Anda. Anda meningkatkan proyek Anda dengan ikon unik. Bahkan, ini adalah serangkaian besar ikon yang dapat Anda gunakan untuk tujuan Anda sendiri.

Di FontAwesome, semua ikon mutlak dan sepenuhnya gratis. Perpustakaan dilisensikan di bawah Lisensi Publik Umum GNU. Ini berarti dapat digunakan secara bebas dalam proyek komersial dan, pada prinsipnya, di mana-mana.

Set ini dibuat oleh Dave Gandhi. Ini termasuk ikon media sosial gratis, ikon untuk meningkatkan antarmuka pengguna, dan banyak lagi.

Biasanya, font font yang luar biasa digunakan bersama dengan bootstrap dan bootstrapcdn. Font luar biasa adalah yang kedua hanya untuk font Google dalam popularitas.

Bagaimana itu bekerja

Fitur utama adalah bahwa semua font ikon yang luar biasa bukan gambar statis. Mereka dalam format font. Dengan kata lain, ini adalah font ikon. Misalnya, ikon pencarian atau logo jejaring sosial sama dengan karakter sederhana A, B, C.

Font Ikon luar biasa dibuat menggunakan vektor yang dapat diskalakan. Karena itu, mereka dapat ditingkatkan ke hampir semua ukuran.

Semua ikon yang tersedia termasuk dalam satu file font. Yang Anda butuhkan adalah mengunduh file ini dari situs resmi dan menghubungkannya dalam gaya.

Mengapa desainer memilih font yang luar biasa

Font Awesome memiliki sejumlah keunggulan:

• Koneksi cepat. Anda hanya perlu mengunduh file khusus dari situs web resmi dan menghubungkannya dengan menentukan jalur ke dalam kode CSS.
• Fleksibilitas dan skalabilitas. Ikon dapat diperbesar dengan ukuran berapa pun. Simbol-simbol akan sejelas perangkat memungkinkan. Pada usia desain responsif, ini penting. By the way, karena alasan yang sama, font ikon yang luar biasa cocok untuk tampilan retina.
• Penyesuaian dgn mode. Ikon dapat dengan mudah diubah dalam warna, ukuran, bayangan atau parameter eksternal lainnya. Desainer mendapatkan semua manfaat dari gaya teks biasa. Anda juga dapat memutar ikon. Misalnya, ditampilkan terbalik atau putar 90 derajat.
• Pemuatan cepat situs. Semua ikon dimasukkan dalam satu file font. Jadi hanya perlu satu permintaan HTTP untuk memuat font yang luar biasa. Ini bagus untuk kinerja situs web.
• Cinta browser. Font Awesome adalah alat lintas-browser. Anda tidak perlu khawatir tentang kompatibilitas font dan ikon browser. Mereka didukung dengan baik oleh mereka semua. Bahkan lama IE8.
• Kompatibel dengan kerangka kerja yang berbeda. Perpustakaan ini dibuat terutama untuk bootstrap. Namun, itu akan bekerja dengan baik dengan kerangka kerja lain juga.
• Beberapa format. Alat ini tersedia dalam format .eot, .ttf, .woff dan SVG. Jadi font yang luar biasa ditangani dengan cara yang sama seperti font web lainnya.
• Tidak diperlukan JavaScript. Font Awesome tidak memerlukan JavaScript untuk dijalankan.

Dengan demikian, Font Awesome adalah alat yang efektif dan nyaman yang secara signifikan menghemat waktu tata letak dan mempercepat situs web Anda.

Kerugian font yang luar biasa

Alat ini juga memiliki kerugian. Untungnya, tidak banyak dari mereka.

Pertama, ikon hanya bisa dicat dalam satu warna. Namun, batasan ini dapat dielakkan. Misalnya, menggabungkan ikon gratis satu sama lain. Atau menggunakan efek CSS

Kedua, font perpustakaan yang luar biasa berisi terlalu banyak ikon dan semuanya termasuk dalam satu file. Jika desainer perancang atau tata letak hanya perlu menghubungkan beberapa ikon, mereka masih harus memuat seluruh perpustakaan sepenuhnya. Dan ini adalah ratusan ribu ikon tambahan yang akan memakan ruang. Namun, ada solusi di sini juga - membuat perakitan Anda sendiri, yang hanya akan menyertakan ikon yang diperlukan.

Font versi luar biasa: 5 dan 6

Font Awesome 5 dirilis pada 7 Desember 2017 dan awalnya berisi 1278 ikon. Versi kelima hadir dalam dua paket: gratis (font yang luar biasa gratis) dan berbayar (Font Awesome Pro). Rencana gratis juga berisi ikon dari semua versi keempat. Ikon tersedia di bawah SIL Open Font Lisensi 1.1, Creative Commons Attribution 4.0, dan MIT.

Font Awesome 6 adalah versi baru yang dirilis pada paruh kedua 2020. Ini termasuk ikon baru dan hanya tersedia dalam paket berbayar.

Font Awesome 6 Alpha juga sedang dalam perjalanan pada tahun 2021. Ini adalah generasi baru dari Perpustakaan Icon. Selain ikon baru, Versi 6 Alpha juga menambahkan gaya baru, layanan baru, dan alat bantu. Pengguna dapat memesan di muka.

Paket gratis dan berbayar: Perbedaan dan fitur

Anda dapat mengunduh ikon untuk paket tarif gratis atau berbayar.

Rencana gratis mencakup lebih dari 1600 ikon dan 1 set. Kit adalah kumpulan ikon, gaya, dan pengaturan yang memungkinkan Anda membuat perubahan tanpa menambahkan kode.

Tarif berbayar:

• Termasuk lebih dari 7800 ikon dan 20 set.
• Menyediakan akses ke Font Awesome Pro. Ini berarti bahwa ikon dapat digunakan dalam aplikasi seluler asli dan di komputer Anda (misalnya, dalam editor teks kata atau saat membuat presentasi di PowerPoint).
• Memungkinkan Anda mengunggah ikon Anda sendiri. Anda dapat menggunakan ikon Anda sendiri di samping atau di tempat font resmi ikon yang luar biasa. Misalnya, ini adalah bagaimana Anda dapat mengunggah logo perusahaan. Anda dapat melakukan tindakan yang sama dengan ikon Anda sendiri seperti dengan yang mendasar - ubah gaya, ukuran, warna, dll.

Kedua versi itu abadi. Artinya, mereka disediakan sekali dan untuk semua.

Cara untuk menghubungkan font yang luar biasa

Pertama-tama, Anda harus pergi ke situs web resmi dan mengunduh perpustakaan. Arsip yang diunduh harus dibongkar dan folder CSS dan font disalin ke folder situs Anda.

Setelah itu, jalur ke file perpustakaan ditentukan antara tag head. Sebagai contoh:

Cara Menampilkan Font Ikon luar biasa di situs web. Metode paling populer:

1. Menggunakan HTML

Cara termudah.

Anda harus pergi ke galeri di situs web resmi (FontAmgges.com/icons?d=Gallery) dan pilih ikon yang Anda suka. Setiap ikon memiliki kode pribadi, misalnya:. Cukup menyalin dan menempelkannya di tempat yang tepat dalam kode.

2. Melalui CSS.

Untuk melakukan ini, gunakan elemen-elemen pseudo setelah atau sebelum, serta Unicode dari ikon yang diperlukan. Anda dapat mengambil semuanya di galeri yang sama. Contoh kode tersebut: F209.

Contoh entri file gaya:

DIV :: After {Display: Block; Konten: 'F209'; Font-family: 'Font Awesome 5 Gratis';}

Kesimpulannya: semua font ikon yang luar biasa

Dengan demikian, font yang luar biasa adalah cara yang cepat dan nyaman untuk menambahkan ikon gratis ke situs web Anda. Semua ikon mudah diskalakan dan tidak memperlambat situs.