89

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に関するヒントを得ることができれば、それで十分です。

ありがとう。

4

8 に答える 8

89

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

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

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

于 2013-03-22T20:54:25.027 に答える
45

fontello はとても良いですが、IcoMoonはさらに素晴らしいです。

于 2014-01-08T05:20:31.980 に答える
11

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

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

于 2013-03-22T01:39:52.883 に答える
7

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

環境：

  • 素晴らしいフォント 4.5.0 (現在のバージョン)
  • Ubuntu 14.04 LTS
  • バッシュ

これを使用して、必要な 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.lessgrep からの出力を開いてファイルに貼り付ける必要があります。

于 2016-01-06T16:55:02.090 に答える
2

確かに、sass を少し動かして、セレクター%をベースにして、拡張のみ可能にすることができます。これが完了すると、必要なアイコンに一致するようにクラスを作成でき、次に@extendfont-awesome クラスを作成できます。

個人的には、私はこれを行いますが、実際にはマークアップでクラスを使用せず、関連する要素へのセレクター@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;
}

出来上がり。

于 2015-02-10T17:27:27.560 に答える
0

ここにあるその他の最適化ツールはすべてブラウザベースです。簡単に自動化してローカルで実行できるものを探しているなら、これがfontite最良の選択肢かもしれません。

TOML構成ファイルで使用しているアイコンをリストします。これらのクラスだけで CSS を作成し、それらのアイコンだけを最終的なフォント ファイルにパックします。Font Awesome Brands、Font Awesome Solid などのアイコンを同じ CSS およびフォント ファイルに結合することもできます。

于 2022-02-04T05:28:50.870 に答える