Laman » Toolkit » 10 Ikon Font Percuma & Berguna Anda Perlu Penanda

    10 Ikon Font Percuma & Berguna Anda Perlu Penanda

    Memandangkan semakin banyak peranti mengguna pakai skrin definisi tinggi, ikon fon menjadi pilihan popular untuk diadaptasi. Ia boleh diubahsuai tanpa menjejaskan kualiti dan boleh ubah melalui CSS. Kami dengan mudah boleh menukar warna, saiz, dan bahkan ikon fon animasi dengan CSS3. Plus itu resolusi bebas yang menjadikan ia kelihatan segar pada ketumpatan skrin apa pun.

    FontAwesome adalah salah satu sumber fon paling popular, dengan koleksi ikon yang besar. Tetapi sangat tidak perlu memuat turun keseluruhan koleksi apabila anda hanya perlu menggunakan sedikit sahaja. Disini adalah 10 sumber alternatif ikon font yang direka dengan baik yang saya harap anda akan mencari berguna pada masa-masa untuk membina laman web dan aplikasi hebat anda yang seterusnya di tempat FontAwesome.

    StackIcons

    StackIcons adalah ikon font untuk lebih daripada 60 jenama sosial moden. Ia datang dengan CSS, membolehkan anda menaip font anda dalam pelbagai bentuk kontena. Anda boleh mendapatkan ikon jenama sosial anda dalam kalangan, kuasa dua atau dengan tepi bulat. Anda juga boleh mewarna ikon dalam lebih daripada satu warna, memberikan warna jenama yang lebih realistik.

    Lesen: SIL Open Font dan MIT

    Twemoji Awesome

    Twemoji adalah projek emotikon sumber terbuka dari Twitter. Elle Kasai telah memindahkannya ke ikon fon yang dipanggil Twemoji Awesome. Semua nama kelas untuk memaparkan ikon adalah sama dengan Twemoji Cheat Sheet, tetapi anda perlu menggunakan dash bukan underscore, itu sahaja. Berikut adalah contoh bagaimana kita menambah hatching_chick ikon:

      

    Lesen: MIT dan CC-BY untuk grafik Emotikon

    Font Diao

    Font Diao adalah koleksi ikon font dari laman web popular atau syarikat yang berpangkalan di China seperti Alibaba, Alipay, WeChat, Xiaomi, dan Weibo. Fon boleh berguna apabila anda sedang membina wesbites yang ditujukan untuk khalayak utama China yang mungkin sudah biasa dengan font tertentu ini.

    Lesen: Lesen Awam

    Sukarelawan

    Socialicious adalah font yang dibina secara eksklusif untuk laman web sosial popular seperti Facebook, Twitter dan Instagram. Fon dibina untuk berfungsi dengan baik dengan Bootstrap. Berikut adalah contoh kod untuk membina butang dengan Bootstrap .btn kelas bersempena kelas fon.

       Berhubungan dengan Linkedin  

    Lesen: Lesen MIT.

    Octicons

    Octicons adalah satu set ikon font yang dibentangkan oleh GitHub, membolehkan anda menggunakan ikon yang sama seperti yang digunakan oleh GitHub pada projek anda. Terdapat lebih daripada 170 ikon yang sedia untuk digunakan pada projek anda yang akan datang.

    Fon Pembayaran

    Jika anda menggunakan gerbang pembayaran, anda mungkin mahu merebut ikon fon ini. Pakej ini mengandungi 95 ikon tidur yang merupakan kaedah pembayaran popular atau gerbang seperti Visa, American Express dan banyak lagi.

    Lesen: SIL OFL 1.1

    Ikon Android

    Ini adalah set ikon yang dicipta oleh Opoloo, sebelum ini dikenali sebagai komuniti Android. Ia termasuk 250 ikon hebat dalam 5 saiz dan 14 warna ikon Android asli.

    Lesen: Attribution-ShareAlike 4.0 International

    DevIcons

    DevIcons adalah satu set ikon font yang dibuat oleh Theodore Vorillas. Ia mengandungi 85 simbol dan logo aplikasi pembangunan biasa seperti ikon GitHub, ikon Gulp, ikon sudut, dan banyak lagi.

    Lesen: MIT

    Buka ikonik

    Ikon Buka mengandungi 223 ikon sedia untuk digunakan dengan bootstrap, rangka kerja atau lembaran gaya anda sendiri. Saiz fon adalah kecil, hanya 12.4Kb, iaitu kira-kira satu perempat daripada apa yang anda dapati di FontAwesome. Perkara yang menarik di sini ialah, ikon ini boleh dikecilkan ke 8px.

    Lesen: SIL.

    Bahan Reka Bentuk Iconik Font

    Terdapat 15 kategori ikon font yang diilhami Design Bahan Google dalam pek ini. Untuk menggunakannya, hanya pasang Material-Design-Iconic-Font.ttf, kemudian gunakan cheatsheet ini. Salin tampal ikon (bukan unicode) ke dalam projek anda. Anda boleh membesarkan ikon, memberi sempadan, berputar, memutar atau flipnya dengan CSS.

    Lesen: Attribution-ShareAlike 4.0 International

    Sekarang Baca: 50+ Font Percuma Font Untuk Pereka Web