fontawesomeのsvgファイル（fontawesome-webfont.svg）からSVGファイルを抽出して、特定のフォントのみを使用し、fontcustomを使用して独自のカスタムフォントを作成できるようにしようとしています。これはすべて、fontawesomeの300ほどのアイコンをすべて使用しているわけではなく、ほんの一握りであるため、フォントファイルのサイズを小さくするためのものです。
既存のアイコンのSVGファイルを抽出するにはどうすればよいですか？私は多くの組み合わせを試しましたが、そのうちの1つは次のとおりです。
font-awesome.min.cssから、icon-calendarは次のようになっていることがわかります。
.icon-calendar:before { content: "\f073"; }
次に、fontawesome-webfont.svgから、d = "で始まるicon-calendarのグリフコードをコピーし、fontcustomで使用する新しいSVGファイル（パスのプレフィックスを付けることにより）calendar.svgを作成しました。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M128 -128h288v288h-288v-288zM480 -128h320v288h-320v-288zM128 224h288v320h-288v-320zM480 224h320v320h-320v-320zM128 608h288v288h-288v-288zM864 -128h320v288h-320v-288zM480 608h320v288h-320v-288zM1248 -128h288v288h-288v-288zM864 224h320v320h-320v-320z M512 1088v288q0 13 -9.5 22.5t-22.5 9.5h-64q-13 0 -22.5 -9.5t-9.5 -22.5v-288q0 -13 9.5 -22.5t22.5 -9.5h64q13 0 22.5 9.5t9.5 22.5zM1248 224h288v320h-288v-320zM864 608h320v288h-320v-288zM1248 608h288v288h-288v-288zM1280 1088v288q0 13 -9.5 22.5t-22.5 9.5h-64 q-13 0 -22.5 -9.5t-9.5 -22.5v-288q0 -13 9.5 -22.5t22.5 -9.5h64q13 0 22.5 9.5t9.5 22.5zM1664 1152v-1280q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47 h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z"
style="fill:#000000;fill-opacity:1;stroke:none" />
</svg>
style = fill lineを含めないと、SVGはブラウザーでレンダリングされないため、fontcustomは空のTTFファイルを作成します。
ここまでは順調ですね。したがって、SVGファイルを手動で作成し、fontcustomスクリプトを実行してfontcustom.cssやその他のフォントファイルを生成することができます。ただし、この段階では複数の問題があります。
結果のアイコンのサイズは、fontawesomeを使用した場合と同じではありません。かなり大きいです。これは、私が見逃しているSVGで何かを指定することと関係があります。でもそもそもどこからコピーしたらいいのかわからない！
一部のアイコンは回転しています。たとえば、星のアイコンが少し回転します。
.icon-star-empty：before {content： "\ f006"; }
手動で作成している個々のSVGファイルを含むものである必要があります。私は何が欠けていますか？それとも何か他にありますか？