Optimalkan Font Awesome hanya untuk kelas yang digunakan

Saya menggunakan file Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass untuk membuatnya _font-awesome.sass jadi saya bisa @importdi proyek Sass saya. Saya juga menggunakan http://middlemanapp.com/ untuk mengonversi Sass ke Css . Pertanyaan:

1. Apakah ada cara untuk hanya membawa kelas ikon bekas ke dalam .css saya yang dikonversi? Karena saat ini ia membawa semua kelas dari _font-awesome.sass

2. BONUS: Apakah mungkin untuk mengkompilasi ulang font dengan kelas ikon bekas untuk membuatnya lebih kecil pada penggunaan produksi?

Jika saya bisa mendapatkan beberapa tip tentang # 1 di atas, itu sudah cukup luar biasa.

Terima kasih.

Sass tidak tahu kelas apa yang sebenarnya Anda gunakan. Ini adalah sesuatu yang harus Anda potong sendiri secara manual. Buka file .scss yang disediakan dan hack semua yang tidak Anda butuhkan.

Mengedit file font itu sendiri untuk menghilangkan mesin terbang yang tidak dibutuhkan memerlukan aplikasi pihak ketiga untuk melakukannya dan berada di luar cakupan pertanyaan ini.

Fontello adalah layanan web online yang dapat melakukan semua ini untuk Anda. Ini memungkinkan Anda mencampur dan mencocokkan antara beberapa koleksi font ikon untuk membuat file font yang sempurna untuk proyek Anda. Selain file font yang disesuaikan, ini menyediakan beberapa file .css yang berisi gaya yang sudah dibuat untuk Anda (mengubah ekstensi menjadi .scss akan memungkinkan Anda untuk mengimpornya ke proyek Sass yang ada).

fontello sangat bagus tapi IcoMoon bahkan lebih keren.

Anda sekarang dapat membuat subset ikon dari Font-awesome untuk penggunaan produksi. Sekarang ada alat subset resmi bernama icnfnt , yang memungkinkan Anda untuk memilih dan mengemas ikon yang Anda perlukan dari versi Font-awesome (v3.0.2) saat ini.

Unduhan khusus juga mencakup semua kode CSS, LESS, SCSS, dan SASS!

Saya menggunakan LESS dan bukan SASS sehingga Anda mungkin harus menyesuaikan implementasi Anda.

Lingkungan Hidup:

• Font awesome 4.5.0 (versi saat ini)
• Ubuntu 14.04 LTS
• pesta

Gunakan ini untuk membuat daftar nomor karakter Unicode yang Anda butuhkan:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

Anda kemudian menggunakan ini dengan FontSquirrel dalam mode ahli di mana Anda memilih subset kustom: http://www.fontsquirrel.com/tools/webfont-generator

Dalam rentang Unicode masukkan nilai yang dipisahkan koma dari atas.

Kemudian untuk menghapus hal-hal yang tidak perlu dari CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

Anda harus membuka less/font-awesome/icons.lessdan menempelkan keluaran dari grep ke dalam file.

Nah, sass pasti bisa diguncang sedikit untuk membuat penyeleksi %berbasis sehingga hanya bisa diperpanjang. Setelah ini selesai, kelas dapat dibuat agar sesuai dengan ikon yang diinginkan, dan kemudian bisa@extend kelas font-mengagumkan.

Secara pribadi, saya melakukan ini, dan tidak benar-benar menggunakan kelas di markup, dan hanya menggunakan penyeleksi ke elemen yang relevan dan @extend mereka dengan kelas ini.

Contoh:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

Kemudian di scss Anda

a.search {
    @extend %fa;
    @extend %fa-search;
}

Et voila.

Fontastic bekerja untuk saya (terdaftar di halaman github Font Awesome ). Pilih mesin terbang yang Anda butuhkan dan unduh sebagai font khusus baru. Alat yang luar biasa.

Iconmoon berhasil untuk saya. Saya menggunakannya dengan mengimpor file svg dari font-awesome sehingga memastikan saya mendapatkan ikon yang saya inginkan dan bukan hanya yang tersedia di situs mereka. Juga tautan ini membantu saya dengan integrasi ikon baru https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/