Font Awesome'i yalnızca kullanılan sınıflar için optimize edin

Ben Yazı Müthiş Sass dosyasını kullanıyorum https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass bunu yapmak için _font-awesome.sass elimden yüzden @importbenim Sass projede. Ben de kullanıyorum http://middlemanapp.com/ dönüştürmek Sass için Css . Sorular:

1. Dönüştürülmüş .css'lerime yalnızca kullanılmış simge sınıflarını getirmenin bir yolu var mı ? Çünkü şu anda _font-awesome.sass'tan tüm sınıfları taşıdı

2. BONUS: Üretim kullanımında küçültmek için yazı tiplerini kullanılan simge sınıflarıyla bir şekilde yeniden derlemek mümkün müdür ?

Yukarıdaki 1 numarayla ilgili bazı ipuçları alabilirsem, bu yeterince harika olur.

Teşekkürler.

Sass'ın gerçekte hangi sınıfları kullandığınıza dair hiçbir fikri yok. Bu, kendiniz elle kırpmanız gereken bir şeydir. Sağlanan .scss dosyasını açın ve ihtiyacınız olmayan her şeyi ortadan kaldırın.

Gereksiz glifleri ortadan kaldırmak için yazı tipi dosyasının kendisini düzenlemek, bunu yapmak için bir 3. taraf uygulamasını gerektirir ve bu sorunun kapsamı dışındadır.

Fontello , tüm bunları sizin için yapabilen çevrimiçi bir web hizmetidir. Projeniz için mükemmel yazı tipi dosyası oluşturmak için birden çok simge yazı tipi koleksiyonunu karıştırmanıza ve eşleştirmenize olanak tanır. Özelleştirilmiş yazı tipi dosyasına ek olarak, sizin için önceden oluşturulmuş stilleri içeren birden çok .css dosyası sağlar (uzantıyı .scss olarak değiştirmek, bunları mevcut Sass projenize aktarmanıza olanak tanır).

fontello çok iyi ama IcoMoon daha da harika.

Artık üretim kullanımı için Font-awesome'den simgeleri alt küme haline getirebilirsiniz. Artık , Font-awesome'in (v3.0.2) mevcut sürümünden yalnızca ihtiyacınız olan simgeleri seçmenize ve paketlemenize olanak tanıyan icnfnt adında resmi bir altkümeleme aracı var .

Özel indirme ayrıca tüm CSS, LESS, SCSS ve SASS kodunu içerir!

Ben SASS değil, DAHA AZ kullanıyorum, bu nedenle uygulamanızı uyarlamanız gerekebilir.

Çevre:

• Font awesome 4.5.0 (mevcut sürüm)
• Ubuntu 14.04 LTS
• bash

İhtiyacınız olan Unicode karakter numaralarının listesini oluşturmak için bunu kullanın:

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

Daha sonra bunu FontSquirrel ile özel alt kümeleme seçtiğiniz uzman modunda kullanırsınız: http://www.fontsquirrel.com/tools/webfont-generator

Unicode aralıklarında yukarıdan virgülle ayrılmış değerler girin.

Sonra gereksiz şeyleri CSS'den kaldırmak için:

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

less/font-awesome/icons.lessGrep'deki çıktıyı açıp dosyaya yapıştırmanız gerekecek .

Pekala, sass, seçicileri %temel almak için kesinlikle biraz sallandırılabilir, böylece yalnızca genişletilebilirler. Bu yapıldıktan sonra, istenen simgelerle eşleşecek sınıflar oluşturulabilir ve ardından @extendharika font sınıfları yapılabilir.

Şahsen ben bunu yapıyorum ve aslında işaretlemede sınıfları kullanmıyorum ve sadece ilgili elemanlar için seçicileri ve @extendbu sınıflarla onları kullanıyorum.

Misal:

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

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

Sonra scss'inizde

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

Et voila.

Fontastic benim için çalıştı ( Font Awesome github sayfasında listelendi ). İhtiyacınız olan glifleri seçin ve bunları yeni bir özel yazı tipi olarak indirin. Mükemmel alet.

Iconmoon benim için çalıştı. Svg dosyasını font-awesome'den içe aktararak kullandım, böylece sadece sitelerinde bulunanları değil, istediğim simgeleri de aldım. Ayrıca bu bağlantı yeni simgelerin entegrasyonunda bana yardımcı oldu https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/