web-dev-qa-db-ja.com

使用されるクラスのみに対してFont Awesomeを最適化する

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

  1. 変換された.cssに使用済みアイコンクラスのみを取り込む方法はありますか？現時点では_font-awesome.sassのすべてのクラスを保持しているため

  2. ボーナス：再コンパイル何らかの方法で使用アイコンクラスでフォントを作成することは可能ですか実稼働での使用は小さいですか？

上記の＃1についていくつかのヒントを得ることができれば、それは十分に素晴らしいことです。

ありがとう。

csssassfont-awesome
81
HP.

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

不要なグリフを削除するためにフォントファイル自体を編集するには、サードパーティのアプリケーションが必要であり、この質問の範囲を超えています。

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

87
cimmanon

fontelloは非常に優れていますが、 IcoMoon はさらに素晴らしいです。

42
TasDiam

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

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

11
nickhar

SASSではなくLESSを使用しているため、実装を調整する必要があります。

環境：

  • Font Awesome 4.5.0（現在のバージョン）
  • Ubuntu 14.04 LTS
  • bash

これを使用して、必要なUnicode文字番号のリストを生成します。

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からの出力をファイルに貼り付けます。

6
Michelle Tsacheva

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

2
mp31415

確かに、セレクターを作成するために、sassを少し揺らすことができます%ベースなので、拡張のみ可能です。これが完了すると、必要なアイコンに一致するようにクラスを作成し、@extendフォントの素晴らしいクラス。

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

例：

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

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

それからあなたのscssで

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

出来上がり。

2
designermonkey