Font Awesome: Panduan Perpustakaan Lengkap

Ikon Percuma Font Awesome: Apa itu dan apa yang digunakan untuk. Bagaimana untuk menyambung ikon ke laman web ini. Kelebihan dan kekurangan perpustakaan.

Set Ikon Awesome Awesome: Panduan Terbaik

Font Awesome adalah satu set fon dan ikon berdasarkan CSS dan kurang. Alat ini membolehkan anda dengan cepat menyambung semua jenis ikon ke laman web ini, dengan ketara meningkatkan reka bentuk dan kebolehgunaannya. Ia cukup untuk memasukkan beberapa baris kod.

Font Awesome memberikan anda ikon vektor berskala yang anda boleh memperibadikan - saiz, warna, bayang -bayang, dan segala yang boleh dilakukan dengan CSS.

Perpustakaan Font Awesome mempunyai koleksi besar cadangan terbaik untuk anda. Anda meningkatkan projek anda dengan ikon yang unik. Malah, ini adalah satu set besar dari semua jenis ikon yang boleh anda gunakan untuk tujuan anda sendiri.

Dalam fontawesome, semua ikon adalah benar-benar dan benar-benar percuma. Perpustakaan dilesenkan di bawah lesen awam GNU. Ini bermakna ia boleh digunakan secara bebas dalam projek komersial dan, pada dasarnya, di mana-mana.

Set itu dicipta oleh Dave Gandhi. Ia termasuk ikon media sosial percuma, ikon untuk memperbaiki antara muka pengguna, dan banyak lagi.

Biasanya, skrip fon awesome font digunakan bersempena dengan Bootstrap dan Bootstrapcdn. Font Awesome adalah kedua hanya untuk fon Google yang popular.

Bagaimana ia berfungsi

Ciri utama adalah bahawa semua ikon Awesome Font bukan imej statik. Mereka berada dalam format fon. Dalam erti kata lain, ini adalah ikon fon. Sebagai contoh, ikon carian atau logo rangkaian sosial adalah sama dengan watak mudah A, B, C.

Ikon Awesome Font dibuat menggunakan vektor berskala. Oleh itu, mereka boleh ditingkatkan kepada hampir semua saiz.

Semua ikon yang ada dimasukkan dalam satu fail fon. Apa yang anda perlukan adalah untuk memuat turun fail ini dari laman rasmi dan sambungkannya dalam gaya.

Mengapa pereka memilih Font Awesome

Font Awesome mempunyai beberapa kelebihan:

• Sambungan cepat. Anda hanya perlu memuat turun fail khas dari laman web rasmi dan menyambungkannya dengan menyatakan jalan ke dalamnya dalam kod CSS.
• Fleksibiliti dan skalabiliti. Ikon boleh diperbesarkan kepada sebarang saiz. Simbol-simbol akan menjadi seperti yang membolehkan peranti. Dalam usia reka bentuk responsif, ini penting. Dengan cara ini, atas alasan yang sama, ikon Awesome Font sesuai untuk paparan Retina.
• Stylization. Ikon boleh dengan mudah diubah dalam warna, saiz, bayangan atau mana-mana parameter luaran yang lain. Pereka mendapat semua manfaat gaya teks biasa. Anda juga boleh memutar ikon. Sebagai contoh, paparkan terbalik atau berputar 90 darjah.
• Pemuatan cepat tapak. Semua ikon dimasukkan dalam satu fail fon. Jadi ia hanya memerlukan satu permintaan HTTP untuk memuatkan Font Awesome. Ini bagus untuk prestasi laman web.
• Cinta penyemak imbas. Font Awesome adalah alat penyemak imbas silang. Anda tidak perlu bimbang tentang keserasian penyemak imbas fon dan ikon. Mereka disokong dengan baik oleh mereka semua. Malah lama IE8.
• Serasi dengan kerangka yang berbeza. Perpustakaan dibuat terutamanya untuk Bootstrap. Walau bagaimanapun, ia akan berfungsi dengan baik dengan rangka kerja lain juga.
• Beberapa format. Alat ini boleh didapati di format .eot, .ttf, .woff dan svg. Jadi Font Awesome dikendalikan dengan cara yang sama seperti fon web lain.
• Tiada JavaScript diperlukan. Font Awesome tidak memerlukan JavaScript untuk dijalankan.

Oleh itu, Font Awesome adalah alat yang berkesan dan mudah yang menjimatkan masa susun atur dan mempercepatkan laman web anda.

Kelemahan Font Awesome

Alat ini juga mempunyai kelemahan. Nasib baik, tidak banyak daripada mereka.

Pertama, ikon hanya boleh dicat dalam satu warna. Walau bagaimanapun, batasan ini boleh dielakkan. Sebagai contoh, menggabungkan ikon percuma antara satu sama lain. Atau menggunakan kesan CSS

Kedua, perpustakaan Font Awesome mengandungi terlalu banyak ikon dan mereka semua termasuk dalam satu fail. Jika pereka pereka atau pereka susun atur hanya perlu menyambung beberapa ikon, mereka masih perlu memuatkan seluruh perpustakaan sepenuhnya. Dan ini adalah beratus-ratus ribu ikon tambahan yang akan mengambil ruang. Walau bagaimanapun, terdapat penyelesaian di sini juga - mewujudkan perhimpunan anda sendiri, yang akan merangkumi hanya ikon yang diperlukan.

Font Versi Awesome: 5 dan 6

Font Awesome 5 telah dikeluarkan pada 7 Disember 2017 dan pada asalnya mengandungi 1278 ikon. Versi kelima datang dalam dua pakej: Percuma (Font Awesome Free) dan dibayar (Font Awesome Pro). Pelan percuma juga mengandungi ikon dari semua versi keempat. Ikon boleh didapati di bawah Lesen Font Terbuka SIL 1.1, Atribusi Creative Commons 4.0, dan MIT.

Font Awesome 6 adalah versi baru yang dikeluarkan pada separuh kedua tahun 2020. Ia termasuk ikon baru dan hanya tersedia dalam pelan berbayar.

Font Awesome 6 Alpha juga sedang dalam perjalanan pada tahun 2021. Ini adalah satu lagi pustaka ikon generasi baru. Sebagai tambahan kepada ikon baru, versi 6 Alpha juga menambah gaya baru, perkhidmatan baru, dan alat bantuan. Pengguna boleh membuat pesanan.

Pelan percuma dan berbayar: perbezaan dan ciri-ciri

Anda boleh memuat turun ikon untuk pelan tarif percuma atau berbayar.

Pelan percuma termasuk lebih daripada 1600 ikon dan 1 set. Kit adalah koleksi ikon, gaya, dan tetapan yang membolehkan anda dengan cepat membuat perubahan tanpa menambah kod.

Tarif berbayar:

• Termasuk lebih daripada 7800 ikon dan 20 set.
• Menyediakan akses kepada Font Awesome Pro. Ini bermakna bahawa ikon boleh digunakan dalam aplikasi mudah alih asli dan pada komputer anda (contohnya, dalam editor teks perkataan atau ketika membuat persembahan di PowerPoint).
• Membolehkan anda memuat naik ikon anda sendiri. Anda boleh menggunakan ikon anda sendiri di samping atau di tempat ikon rasmi Font Awesome. Sebagai contoh, ini adalah bagaimana anda boleh memuat naik logo syarikat. Anda boleh melakukan tindakan yang sama dengan ikon anda sendiri seperti yang asas - menukar gaya, saiz, warna, dan sebagainya.

Kedua-dua versi kekal. Iaitu, mereka disediakan sekali dan untuk semua.

Cara untuk Sambungkan Font Awesome

Pertama sekali, anda perlu pergi ke laman web rasmi dan memuat turun perpustakaan. Arkib yang dimuat turun mesti dibongkar dan folder CSS dan Font disalin ke folder tapak anda.

Selepas itu, laluan ke fail perpustakaan ditentukan di antara tag kepala. Sebagai contoh:

Bagaimana untuk memaparkan ikon Awesome Font di laman web. Kaedah yang paling popular:

1.Using HTML.

Cara yang paling mudah.

Anda perlu pergi ke galeri di laman web rasmi (fontawesome.com/icons?d=gallery) dan pilih ikon yang anda suka. Setiap ikon mempunyai kod peribadi, contohnya:. Ia cukup untuk menyalin dan menampalnya di tempat yang betul dalam kod.

2. Melalui CSS.

Untuk melakukan ini, gunakan unsur-unsur pseudo selepas atau sebelum, serta Unicode dari ikon yang diperlukan. Anda boleh mengambil semuanya di galeri yang sama. Contoh kod itu: F209.

Satu contoh entri fail gaya:

Div :: Selepas {Display: Block; Kandungan: 'F209'; Font-Family: 'Font Awesome 5 Percuma';}

Kesimpulannya: Semua ikon Awesome Font

Oleh itu, Font Awesome adalah cara yang cepat dan mudah untuk menambah ikon percuma ke laman web anda. Semua ikon mudah berskala dan tidak melambatkan laman web ini.