Awesome便利ですよね。導入が簡単で無料でも1500個以上と十分すぎる数のアイコンが使えます。このサイトでも使っているのですが、ただ1つ問題があって、サイズが大きく重いことです。Awesomeのアイコンは5つ、他は自作アイコンをsvgとimgタグで表示してます。Awesomeのアイコンは4つしか使ってないのに1500以上のアイコンを全て読み込んでいて無駄です。そこでサブセット化という、フォント内の使っていない文字を削除することで軽量化ができるのですが、IcoMoonを使うとこの処理が簡単に行えます。スポンサーリンクフォントの生成IcoMoonとは必要なアイコンだけ集めたフォントを作れるサービスです。有料プランもありますが、無料アイコンや自作アイコンからカスタムフォントを作るだけなら無料で使えます。App」からフォントの生成が行えます。Set」で消してください。Awesomeのアイコンセットが読み込まれるので、その中から必要なものを選択します。Awesome以外にベクターデータの自作アイコンを使用している場合、まとめてそれらもフォント化しておくと、リクエスト数減少による軽量化&高速化が見込めます。Icons」から自作アイコンのSVGファイルを選択して取り込めるので、もし自作ベクターアイコンがある場合はここで一緒にフォント化してしまいましょう。ちなみに、この時パスのストロークが消えてしまうので、もしパスにストロークが適応されている場合はイラストレータなどを利用してパスのアウトライン化を行ってください。Font」をクリックします。ここで生成されたフォントをダウンロードできるのですが、その前にフォントの設定を変更します。NameやMetadataを適宜編集してください。Nameはicomoonのままじゃなくて任意に変更した方がいいと思います。Metadataはライセンスが関係してくるので、下の方に記載したライセンスのセクションを参考に適宜変更してください。それが完了したら右下のDownloadボタンからフォントをダウンロードしてください。プロジェクトのダウンロード(任意)今回生成したフォントなんですが、ブラウザのストレージがクリアされると最初から作り直しとなり、その際にそれぞれのアイコンに対応する文字コードが変わったりすると色々と面倒なので、ローカルに保存しておくことをおすすめします。Projectに移動するとプロジェクト名の変更とローカルへのダウンロードができるので、これをどこかに保管しておきましょう。テーマに組み込むwordpressテーマのディレクトリを直接操作します。wordpressディレクトリ内の「wp-content/themes/[テーマ名]/」がテーマのディレクトリなので、この中にfontsディレクトリをコピーしてください。「wp-content/themes/[テーマ名]/style.css」内部に、ダウンロードした中にあったstyle.cssの内容を全てコピーして追記してください。Selectorを標準から変えていないのであれば、icon-***のようなクラス名を任意の要素に付けてやればアイコンが使えます。スポンサーリンクライセンス面倒な部分です。コピーライトやライセンス条文って人間が読めるメタデータやヘッダー、一緒に配布するテキストファイルなどに含める必要があります。詳しくは別記事にまとめてますが、正直僕もこれに関しては正解が分かりません。Awesomeのコピーライトを記載して、そのURLをフォントのメタデータに埋め込む形にしました。Awesomeを使用するのに読み込んでいたcssやフォントファイル151KBを6KBに減らすことができました。実際は他に使用していたsvgなども組み込んでのサイズなので、通信容量の節約はこれ以上になります。Awesomeも使いたいって人は試してみてはどうでしょうか。共有この記事が役に立ったならば、シェアしていただけると嬉しいです。MEGA-Sの精度を上げるためにメッシュベッドレベリングを使いたくて以下の記事を参考にカスタムファームウェアを導入したのですが、いくつか躓いた点があったので、記事にします。次の投稿BuffaloのSSDを小型化してみたSSD以前の記事でBuffaloの外付けSSDを分解した際に、SSDの基盤がとても小さく、中身がスカスカなことが判明。2.5インチSSDなんてのは大体中身がスカスカなので、予想はしてたけど。