Contoh font yang mengagumkan. Font Awesome dan IcoMoon: bekerja dengan font ikon. Apa itu font ikon
Halo teman teman.
Hari ini artikel baru dari tajuk "Desain".
Mereka yang mengikuti blog saya tahu bahwa beberapa hari yang lalu saya memperbarui desain blog. Jadi, semua ikon yang Anda lihat di depan item menu dan heading, serta di beberapa heading, misalnya di tab antara peralihan postingan populer dan diskusi, di dekat heading artikel serupa di akhir teks dan selanjutnya ke tajuk nomor komentar, ini semua bukan gambar, dan font Font Awesome khusus, yang dengannya Anda dapat dengan mudah membuat ikon berkualitas baik.
Hal yang sama berlaku untuk ikon kecil di dekat jumlah komentar, tanggal, jumlah tampilan.
Dan dalam banyak kasus, ini jauh lebih mudah dilakukan daripada menentukan gaya dan menampilkan gambar setiap saat. Selain itu, tidak perlu meresepkan gaya tambahan untuk perataan, warna, dan sebagainya, karena ikon ditampilkan dalam font dan cocok dengan gaya umum blok tempatnya ditempatkan.
Secara umum, masalahnya sangat keren. Ketika saya membuat pesanan pertama saya, saya menemukan ikon-ikon ini dan itu membuat saya sangat tidak nyaman. Saya hanya tidak tahu cara menggunakannya, dan dalam beberapa kasus saya hanya mengganti ikon ini dengan gambar. Sekarang saya sama sekali tidak melihat masalah dalam menggunakannya. Cukup menghubungkan font Font Awesome ke situs, lalu menambahkan kode keluaran ikon ke tempat yang tepat. Sangat sederhana, mari kita lihat dalam prakteknya.
Bagaimana cara menambahkan ikon Font Awesome ke situs Anda
Ada 2 metode koneksi:
- Hubungkan perpustakaan ikon dari layanan itu sendiri, mis. atur jalur ke file ikon di sisi penyimpanan cloud, tempat layanan menyimpannya. Dalam hal ini, setiap kali halaman dimuat, file ini juga akan dimuat. Awalnya, saya memiliki opsi ini, tetapi kemudian saya perhatikan bahwa ini sangat memperlambat pemuatan halaman. Itu sebabnya saya beralih ke opsi kedua.
- Unduh file ikon Font Awesome dari situs resmi dan masukkan ke dalam templat, seperti file gaya biasa. Pekerjaan situs menjadi terasa lebih cepat.
Mari pertimbangkan kedua opsi secara lebih rinci.
Pilihan 1
Kita pergi ke Situs web resmi Font Awesome dan ambil sebaris kode untuk mengunduh file dari penyimpanan cloud. Baris akan berada di paragraf pertama halaman, saya juga menggandakannya di bawah.
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
Kami menempelkannya di situs Anda di antara area dan menempelkannya di sini. Jika Anda memiliki situs WordPress, maka area ini terletak di file Header.php.
Ini melengkapi koneksi. Hanya tersisa buka halaman ini dan pilih ikon yang sesuai. Klik pada ikon yang Anda suka dan Anda akan masuk ke halaman dengan opsi untuk ukuran ikon yang berbeda sehingga Anda memahami tampilannya dalam ukuran font yang berbeda. Juga akan ada kode yang akan menampilkan ikon.
Kami menempelkan kode ini di mana saja di mana kami ingin menampilkan ikon.
Saya perhatikan bahwa metode penyisipan ini tidak berfungsi di judul widget WordPress. Jika Anda hanya memasukkan kode ikon sebelum frasa, itu akan hilang dari sana. Oleh karena itu, Anda perlu menggunakan metode lain menggunakan Jquery, yang akan saya buat di artikel selanjutnya. Semuanya juga sangat sederhana di sana.
Kode harus ditempatkan di file template atau di beberapa elemen teks. Misalnya, dalam widget teks di bidang input konten itu sendiri, ikon berfungsi. Jadi, widget posting populer dan yang dibahas berfungsi untuk saya. Ikon lainnya dijabarkan dalam tata letak template itu sendiri dan plugin.
pilihan 2
Unduh folder dengan file dari sini.
Kami mengunggah semua file ke root tema ke semua folder dan file. Saya tidak mempelajari apakah akan mengunduh hanya satu file tertentu atau semua folder, jadi saya mengunduh semua yang ada di dalam arsip.
Selanjutnya, Anda perlu memasukkan file font-awesome.min.css yang terletak di folder CSS. Kami menggunakan baris berikut, cukup tulis jalur Anda (nama domain dan tema) di dalamnya. Kami menempatkannya dengan analogi, seperti opsi pertama - di header situs.
< link rel = "stylesheet" href = "http://domain Anda/wp-content/themes/nama folder tema/css/font-awesome.min.css"> |
Ini adalah materi yang sederhana namun sangat berguna bagi mereka yang suka melakukan sesuatu dengan desain situs mereka. Tidak perlu menggunakan gambar sekarang, kurangi di Photoshop, pangkas, dan sebagainya. Cukup menghubungkan font Font Awesome dan menggunakan kemampuannya.
Mengubah warna ikon
Jika Anda perlu mengubah warna ikon, ini juga cukup realistis dan tidak akan sulit. Setiap ikon memiliki kelas umum (.fa) dan kelas individual dengan nama ikon. Pada contoh ikon pensil di atas, kelas khusus adalah:
fa-pensil-persegi-o
< span class = "s" >fa-pensil-persegi-o< / span > |
Jika Anda ingin menyetel warna tertentu untuk ikon ini, tambahkan kelas ini ke file gaya Anda dan tulis warna di dalamnya, serta ukuran, gaya font, dan gaya lain pilihan Anda. Nuansanya adalah ikon ditampilkan di elemen semu sebelumnya, jadi dialah yang perlu ditata. Misalnya:
Fa-pencil-square-o:before( color: #111; /*black color*/ font-size:12px /*icon size lebar dan tinggi 12px*/ )
Awesome adalah sekumpulan ikon vektor. Atau lebih tepatnya, font yang tidak terdiri dari huruf dan angka, tetapi dari gambar. Dan gambar-gambar ini, karena pada dasarnya adalah font, dapat ditata (dimodifikasi) menggunakan gaya CSS, mengatur warna, ukuran, bayangan, dan banyak lagi. Apa yang akan Anda setujui sangat nyaman.
Font Awesome saat ini berisi lebih dari 1500 ikon gratis!
Cara menginstal Font Awesome di situs web Anda
Untuk menggunakan ikon font Keren, Anda perlu mengunduh satu set font dan gaya ke situs web Anda. Untuk melakukan ini, buka situs web resmi - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself dan unduh arsip dengan mengklik tombol.
Sekarang pasang di bagian gaya situs web Anda luar biasa:
Cara Alternatif untuk Menghubungkan Font Keren
Anda tidak dapat menyalin apa pun ke situs Anda, tetapi mengunduh semua data dari jaringan CDN. Untuk melakukannya, tambahkan kode berikut ke bagian :
Keuntungan dari solusi ini adalah kecepatan situs yang lebih cepat, karena data akan dimuat secara paralel dari server yang berbeda (situs dari hosting Anda, dan font dari jaringan Awesome), selain itu, font sudah dapat di-cache oleh browser jika Anda pernah mengunjungi situs tempat mereka digunakan.
Sisi negatifnya adalah ketidakmungkinan menggunakannya di situs yang berdiri sendiri (tanpa akses ke Internet) dan ketergantungan pada jaringan Awesome CDN. Oleh karena itu, saya biasanya menggunakan cara pertama.
Cara menggunakan font keren di situs web
Setelah Anda menyertakan font di situs Anda, Anda dapat menambahkan Ikon Luar Biasa ke halaman web Anda dengan dua cara:
- mengatur kelas yang sesuai untuk elemen Dan ;
- tambahkan ke elemen yang diinginkan menggunakan elemen semu :sebelum, :setelah dan nilai properti yang sesuai isi.
Contoh Font Keren
Untuk salah satu situs saya menggunakan kode berikut (untuk elemen gaya font mengagumkan menggunakan versi 4.7.0):
Pengadaan peralatan komputer dan perangkat lunak
Pembangunan televisi keamanan dan sistem pengawasan video
Pengembangan kontrol akses dan sistem manajemen
Desain dan pemasangan LAN/SCS dan telepon
Di browser hasilnya seperti ini:
Di mana menemukan ikon keren untuk situs web
Jika Anda memiliki huruf dan angka yang tercetak pada tombol keyboard dan penggunaannya tidak menimbulkan kesulitan, maka font yang luar biasa memiliki pertanyaan: bagaimana cara mengetahui korespondensi antara kode ikon dan gambar grafiknya. Misalnya, kode HTML apa yang digunakan untuk menampilkan ikon Android?
Untuk mengetahuinya, kunjungi situs web resmi - https://fontawesome.com/icons?d=gallery&m=free
Misalnya, gambar Android sesuai dengan kode berikut:
Di layar terlihat seperti ini:
Versi Font Awesome mana yang terbaik untuk digunakan di situs
Font Awesome terus berkembang, dengan ikon dan desain baru ditambahkan secara teratur. Pada saat penulisan ini, font versi 5 masih relevan. Tetapi Anda dapat dengan aman menggunakan edisi sebelumnya 4.7.0 atau bahkan 3.2.1 di situs Anda. Untuk melakukan ini, kunjungi halaman
Ikon dirender melalui ::before pseudo-class, jadi cukup menambahkan kelas dengan nama ikon ke elemen apa pun. Elemen yang biasa digunakan , tetapi Anda dapat menggunakan elemen sebaris lainnya, misalnya: , dan sebagainya.
Untuk dua kelas utama ditentukan - fa dan fa-icon , di mana nama ikon ditulis sebagai pengganti icon. Semua nama tersedia di halaman ini.
Beras. 1. Ikon untuk pemutar video
Untuk menambahkan ikon bernama play kita akan menulis kode berikut:
Unsur itu sendiri kosongkan dan sisipkan di tempat di halaman tempat ikon harus ditampilkan. Ukurannya cocok dengan ukuran teks saat ini.
Kita dapat mengubah ukuran ikon apapun dari set menggunakan properti font-size, mendefinisikan ulang dalam gaya kita. Font Awesome juga menawarkan lima ukuran siap pakai. Tambahkan saja kelas tambahan ke elemen seperti yang ditunjukkan pada contoh 1.
Contoh 1. Ukuran ikon
ukuran asli
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Hasil dari contoh ini ditunjukkan pada Gambar. 2.
Beras. 2. Ukuran ikon
Warna
Karena ikon adalah simbol teks, properti gaya color , background , text-shadow , dan lainnya yang mengatur dekorasi teks berlaku untuk itu. Contoh 2 menunjukkan beberapa opsi untuk mengubah tampilan ikon.
Contoh 2. Ikon Gaya
Hasil dari contoh ini ditunjukkan pada Gambar. 3.
Beras. 3. Ikon berwarna
Font Awesome memperkenalkan kelas fa-inverse khusus yang mengubah warna ikon menjadi putih, jadi tidak ada warna yang ditentukan dalam gaya ikon buku.
Rotasi Ikon
Ikon dapat diputar 90, 180 atau 270 derajat searah jarum jam, dan dibalik secara horizontal atau vertikal. Kelas berikut digunakan untuk ini:
- fa-rotate-90 - putar 90º searah jarum jam;
- fa-rotate-180 - putar 180º;
- fa-rotate-270 - putar 270º;
- fa-flip-horizontal - membalik secara horizontal;
- fa-flip-vertical - membalik secara vertikal.
Perlu diperhatikan bahwa tidak semua ikon masuk akal untuk diputar dan dipantulkan, hasilnya akan terlihat untuk ikon yang tidak simetris (contoh 3).
Contoh 3 Ikon Putar dan Balik
Hasil dari contoh ini ditunjukkan pada Gambar. 4. Ikon pesawat pertama ditampilkan dalam bentuk aslinya, yang kedua diputar 90º, dan yang ketiga dipantulkan secara horizontal.
Beras. 4. Transformasi ikon
Animasi
Animasi biasanya digunakan untuk membuat efek menunggu. Ikon dapat dibuat berputar searah jarum jam tanpa batas dalam dua cara. Kelas fa-spin menghasilkan putaran yang mulus, sedangkan kelas fa-pulse menghasilkan putaran inkremental. Rotasi bola sepak ditunjukkan di bawah ini.
Menggabungkan ikon
Selain ikon keluaran biasa dapat digabungkan satu sama lain. Untuk melakukan ini, kami membuat elemen
Pembaca yang budiman, saya menyambut Anda! Saya berencana untuk berbicara tentang font untuk waktu yang lama, saya secara aktif menggunakannya dalam proyek saya, dan hari ini saya akan memberikan beberapa argumen yang mendukungnya.
Jika Anda masih menggunakan gambar bitmap untuk elemen grafik kecil di situs, maka saya harus mengecewakan Anda - saat dimuat, gambar tersebut membuat permintaan http tambahan ke server, dan saat diskalakan, gambar tersebut kehilangan kejelasannya.
Sebelumnya, untuk mengurangi jumlah permintaan, saya menggabungkan elemen desain grafis menjadi , solusi seperti itu untuk mengoptimalkan kecepatan memuat situs masih relevan hingga saat ini. Namun, masalah penskalaan tidak diselesaikan dengan cara ini, dan saat gambar diperbesar, gambar tersebut kehilangan tampilan menariknya.
Berisi sekumpulan besar ikon vektor yang berskala sempurna dan tampak hebat di layar resolusi tinggi! Mereka digunakan di mana-mana di situs: di formulir pencarian, di daftar judul, di dekat tanggal publikasi artikel, serta di tombol jejaring sosial dan elemen desain lainnya.
Keuntungan dan kerugian dari font ikon
Gambar tradisional telah lama membuktikan dirinya sebagai elemen grafis dari desain situs web, di era modern gambar tersebut secara bertahap digantikan oleh fitur baru CSS3, SVG, dan font ikon.
Apa popularitas mereka karena? Peran yang menentukan dimainkan oleh fleksibilitas konfigurasi, kemudahan instalasi dan penggunaan dalam proyek. Keuntungan utama:
- Koleksinya memiliki lebih dari 500 ikon vektor gratis untuk situs tersebut.
- Ikon diskalakan ke ukuran apa pun tanpa kehilangan kualitas.
- Menata dengan CSS - ukuran font, warna, dan properti lainnya.
- Tidak ada dukungan browser yang diaktifkan.
- Kompatibilitas lintas-browser (IE7 dan lebih tinggi), dukungan untuk browser seluler.
Seiring dengan kelebihannya, perlu disebutkan kerugiannya, sayangnya, juga ada, tetapi agak tidak signifikan:
- Tidak seperti gambar, yang tampak sama di browser yang berbeda, font mungkin terlihat berbeda tergantung pada browser dan sistem operasinya.
- Desainer telah mengerjakan sejumlah besar ikon secara mendetail, tetapi ada kemungkinan Anda tidak akan menemukan ikon yang tepat untuk proyek Anda.
Cara memasukkan font Font Awesome
Cara pertama dan termudah untuk memasukkan font adalah mengunduhnya dari CDN eksternal dengan memasukkannya ke dalam bagian
baris berikutnya: <"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Cara kedua adalah menginstal font Font Awesome secara manual di hosting Anda. Unduh arsip dari situs resmi, bongkar dan simpan folder css dan font di server ke direktori font-awesome. Itu terhubung dengan cara yang sama, hanya mengubah jalur ke file:
<tautan rel="stylesheet" href= "../font-awesome/css/font-awesome.min.css">Cara Menggunakan Ikon Font Awesome di Situs Web Anda
Untuk memasukkan ikon ke halaman, kami melanjutkan sebagai berikut: kami menemukan ikon yang diinginkan di situs dan menyalin kodenya, lalu menempelkannya dalam mode HTML:
kelas="fa twitter"> saya >
Situs web resmi proyek memiliki dokumentasi dan contoh penggunaan tambahan.
Terkadang elemen situs dihasilkan secara dinamis, misalnya oleh fungsi PHP, dan tidak ada kemampuan langsung untuk mengedit HTML, kemudian kelas semu digunakan dalam pemilih CSS.
Saya akan menunjukkan cara melakukan ini menggunakan widget kategori sebagai contoh. Lihatlah cuplikan kode sumber:
<div class="widget_title"> kategori blogdiv > <ul > <li class="cat-item cat-item-5"> <a href="/kategori/wordpress/" > WordPresssebuah > li > ul >.cat-item :before ( konten : "\f07c" ; font-family : FontAwesome; color :#393 ; padding-right :10px )Properti konten menghasilkan ikon dari kode hex tabel karakter Unicode, yang dapat ditemukan di halaman dengan ikon:
Unicode \f07c hanya sesuai dengan kode hex dari ikon yang diinginkan, yang nantinya akan kita gunakan untuk menata kelas kita sendiri.
Ini menyimpulkan ulasan singkat, jika Anda memiliki pertanyaan - tanyakan di komentar. Apakah Anda menggunakan ikon Font Awesome di situs Anda, mungkin font yang berbeda?
CDN Font Awesome adalah cara termudah untuk mulai menggunakan Font Awesome di situs web atau aplikasi Anda, semuanya hanya dengan satu baris kode. Anda tidak perlu mengunduh atau memasang apa pun.
Kami membuat setiap kumpulan ikon satu per satu untuk setiap situs, yang memungkinkan Anda mengubah ikon dengan cepat dan tanpa masalah yang tidak perlu. Kami juga dapat mengidentifikasi set ikon mana yang menjadi milik Anda dari alamat email ini, yang berarti Anda dapat mengelola set Anda.
Ikon untuk situs. Cepat.
Anda tidak perlu membuang waktu pada file di server Anda. Anda akan mendapatkan semua 675 ikon plus kumpulan gaya - semuanya dioptimalkan untuk pemuatan cepat.
Pembaruan ringan
Karena setiap situs akan memiliki kumpulan ikon yang unik, Anda dapat dengan mudah memperbaruinya tanpa mengubah kode apa pun. Aneh =).
Atau
Kustomisasi tingkat lanjut Mudah
Menggunakan CSS
- Tempelkan kode berikut ke dalam tag ke kode HTML situs web Anda.
"path/ke/font-awesome/css/font-awesome.min.css">
- Lihat contoh
Menggunakan Sass atau Kurang
Gunakan metode ini untuk menyesuaikan Font Awesome 4.7.0 dengan LESS atau SASS.
- Salin seluruh folder font-awesome ke folder proyek Anda.
- Di proyek Anda, buka file font-awesome/less/variables.less atau font-awesome/scss/_variables.scss dan edit masing-masing @fa-font-path atau $fa-font-path untuk menunjuk ke jalur folder dengan font .
@fa-font-path : "../font" ;
Path ke folder font harus relatif terhadap folder css yang dikompilasi.
- Kompilasi file LESS atau SASS Anda dengan kompiler. Semuanya harus diperoleh.
- Lihat contoh untuk memulai dengan Font Awesome!
Atau
Tingkat Pro tingkat lanjut
- Tambahkan baris ini ke Gemfile aplikasi Anda:
permata "font-mengagumkan-kurang"
- Selanjutnya, jalankan:
$ bundel
- Atau instal secara manual:
$ permata instal font-mengagumkan-kurang
Jika Anda menggunakan Rails, tempel kode berikut, misalnya, di file application.less Anda:
- Tambahkan baris berikut ke Gemfile proyek Anda:
permata "font-awesome-sass"
- Selanjutnya, jalankan:
$ bundel
- Atau instal secara manual:
$ permata instal font-awesome-sass
Jika Anda menggunakan Rails, tempel kode berikut, misalnya, di file application.scss Anda:
@import "font-awesome-sproket" ; @import "font-mengagumkan" ;
informasi tambahan
Validator
Untuk memberikan pengalaman terbaik di browser lama dan buggy, Font Awesome menggunakan retasan CSS dalam beberapa kasus untuk mengatasi gangguan dan bug di browser. Secara alami, peretasan ini menyebabkan peringatan saat memeriksa kode di validator. Selain itu, Font Awesome menggunakan properti CSS baru dalam beberapa situasi yang belum terstandarisasi sepenuhnya, tetapi hanya digunakan untuk peningkatan progresif.
Dalam praktiknya, peringatan validator ini tidak relevan, karena sebagian besar CSS berfungsi tanpa peretasan dan, karenanya, tidak mengambil bagian dalam pekerjaan di area yang tidak menggunakannya. Sebenarnya, itu sebabnya kami mengabaikan peringatan ini.
Internet Explorer 8 dan @font-face
IE8 memiliki beberapa masalah dengan @font-face saat digunakan bersamaan dengan :before pseudo-element. Font Awesome hanya menggunakan kombinasi seperti itu. Jika halaman di-cache atau dimuat tanpa mengarahkan kursor mouse ke jendela browser (misalnya, saat mengklik tombol "segarkan" atau saat memuat konten melalui bingkai), halaman akan dibuat sebelum font dimuat. Mengarahkan kursor mouse ke halaman (badan) akan menampilkan beberapa ikon, mengarahkan kursor ke ikon yang belum dimuat juga akan menghidupkannya kembali. masalah ini.
Mencari
Berlangganan
