フォントの最適化使用するクラスのみ

Question

フォントAwesome Sassファイルhttps://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sassを使用して_font-awesome.sassとしていますので、私のSassプロジェクトで@importとすることができます。私もhttp://middlemanapp.com/を使用してSassをCssに変換しています。質問：

1. は私の変換の.cssにのみに使用されるアイコンのクラスをもたらすための方法はありますか？今、それは_font-awesome.sassからすべてのクラスを実施しているので

2. BONUS：は、それが生産、使用上のそれを小さくする使用するアイコンのクラスで何とかフォント再コンパイルすることは可能ですか？

上記の＃1のヒントを得ることができれば、これで十分でしょう。

ありがとうございました。

Answer 1

あなたは実際にどのクラスを使用しているのか分かりません。これは手動で自分でトリミングする必要があります。提供された.scssファイルを開き、必要のないものをハックします。

不要なグリフを取り除くためにフォントファイル自体を編集するには、サードパーティーのアプリケーションが必要ですが、この質問の対象外です。

---

Fontelloはあなたのためにこのすべてを行うことができますオンラインのWebサービスです。それはあなたのプロジェクトのための完璧なフォントファイルを作成するために複数のアイコンのフォントのコレクションを組み合わせてマッチさせることができます。カスタマイズされたフォントファイルに加えて、既に生成されたスタイルを含む複数の.cssファイルを提供します（拡張子を.scssに変更すると、それらを既存のSassプロジェクトにインポートできます）。

Answer 2

プロダクション用にFont-awesomeからアイコンをサブセット化できるようになりました。 icnfntという公式のサブセットツールがあります。これにより、必要なアイコンだけを現在のバージョンのFont-awesome（v3.0.2）から選択してパッケージ化することができます。

カスタムダウンロードには、CSS、LESS、SCSS、およびSASSコードも含まれています。

Answer 3

fontelloは非常に良いですが、IcoMoonはもっと素晴らしいです。

Answer 4

セレクター%を拡張可能にするため、セレクターを作るためには、ささいなことがあります。これが完了すると、希望のアイコンと一致するようにクラスを作成してから、@extendのフォントを使ってすばらしいクラスを作成することができます。

私は個人的にこれを行い、実際にはマークアップのクラスを使用せず、関連する要素にセレクタを使用し、これらのクラスでは@extendを使用します。

例：SCSS

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

のEtの出来上がりで次に

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

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

。

Answer 5

私はSASSではなくLESSを使用していますので、実装を変更する必要があります。

環境：

これはあなたが必要とするUnicode文字番号のリストを生成するためのフォント素晴らしい4.5.0（現行バージョン）

のUbuntu 14.04 LTS

bashの

使用： 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

次に、カスタムサブセットを選択するエキスパートモードで、FontSquirrelでこれを使用します。http://www.fontsquirrel.com/tools/webfont-generator

Unicode範囲では、上記のカンマ区切りの値を入力します。

次に不要なものをCSSから削除するには： egrep "@ fa-var - （$ fa_icons）;" less/font-awesome/icons.less

less/font-awesome/icons.lessを開き、grepの出力をファイルに貼り付ける必要があります。運のベスト

、 マーティン

Answer 6

Fontasticは、（それがFont Awesome github pageに上場しました）私のために働きました。必要なグリフを選択し、それらを新しいカスタムフォントとしてダウンロードします。優れたツール。

Answer 7

<script> 
     // Asynchronously load non-critical css 
     function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function() { i.media = n || "all" }) } 
     // load css file async 
     loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
    </script>