「Shopify Font Awesome」でググったときの1ページ目に日本語の記事がひとつも出てこないの、まじか…と思ったので書いておきます。
まあ、普通にFontAwesomeのファイルをassetsに格納して呼び出すだけなので、誰もわざわざ書いていないだけかもしれません。
Font Awesomeの導入手順
Font Awesomeのファイルをダウンロード
まずはFont Awesomeのサイトにお邪魔します。
今回は無料版を使っていきます。
自分のサイトにアップロードしてwebフォントとして使用することになりますので、Host Yourselfのやり方に進みましょう。
- 「Start for Free」をクリック
- 「Host Yourself – Web Fonts」をクリック
このページに書いてあるとおりなのですが、「Before You Get Started」の「Download the Font Awesome v6 files」をクリックします。
そうするとダウンロードページにいきますね。
「For The Web」の方にある、「Free for Web」をクリックします。
以前のバージョンが欲しい人はリストから選んで好きなものをダウンロードしてください。
ダウンロードしたファイルをテーマファイルに格納
ダウンロードしたファイルを解凍すると、いろんなファイルが入っています。
「css」フォルダには、アイコンの種類別にCSSファイルが分かれて入っていますが、とりあえず楽ちんなのは「all.min.css」を使うことです。
無料版では使えないPro版のデータなども含まれているので、無駄といえば無駄です。パフォーマンスにこだわる方は適宜必要なファイルだけを選んでください。
Shopifyテーマの構造上、assetsディレクトリ以下にサブディレクトリを作ることができません。
「font_awesome」なんていうディレクトリにまとめて入れておくということができないので、ファイル名は区別がつくような名前（font-awesome-all.min.cssなど）に変更しておくのがおすすめです。
上記のCSSファイルと、「webfonts」フォルダに入っている実体のフォントデータ（ttfファイルやwoff2ファイル）を、Shopifyテーマのassetsディレクトリに格納します。
レイアウトファイルなどでFont Awesomeを読み込む
それぞれのShopifyテーマの構造によりますが、一般的にlayout/theme.liquidの中にhead要素が記述されていると思います。
そこでCSSファイルを読み込みます。
Liquid文法だとこんな感じです。
{{ 'font-awesome-all.min.css' | asset_url | stylesheet_tag }}HTMLやCSSの中でアイコンを呼び出す
あとはふつうのwebサイトと同じように、HTMLやCSSファイルの中でアイコンを呼び出します。
HTMLで直接記述する場合
<i class="fa-solid fa-tag"></i>CSSの::before擬似要素などで使う場合
.breadcrumbs li + li::before {
content: "\f054";
font: var(--fa-font-solid);
}Font Awesomeが用意している.fa-ulのようなリストマーカー用のclassや、多彩なアニメーションのclassを利用したりもできるので、自前のCSSの記述を減らしたい場合は積極的に使っていきましょう。
現実の運用上、ドキュメントを見に行かないといけない方が不便だったり、そういう土壌のない組織・チームの場合は、普通にプロダクトのCSSファイルに全部書いてあったほうが調べる場所がわかりやすくていい、みたいなそういう事情もあったりして、ITの前線行ってないようなインハウスだと特に、あまり使う機会がなかったりなんだりもごもご…
ちなみに、以前はCSSで上記のような使い方をする場合、
.breadcrumbs li + li::before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}みたいな感じでfontプロパティを指定していました。
v6ではこれをCSSのカスタムプロパティで指定するようになったので、ちょっとすっきりしてわかりやすくなりました。
ちゃんと擬似要素用の使用方法ドキュメントもあって親切ですね。
しかし…
Working with Pseudo-elements is Not for the Faint of fa-heart.
Referencing icons using pseudo-elements is more complicated and prone to errors than the standard way of dropping an <i> element into your HTML.
Make sure you have a firm understanding of CSS and are willing to learn about some of the underpinnings that make Font Awesome work.
そんな注意書きが必要なのか…Font Awesomeを利用しようとする、しかもこの公式ドキュメントを参照するような層に、この注意書きが…
まとめ
公式ドキュメントも非常に充実していますし、Shopifyで利用するにあたって特別な注意点というのはありませんが、assetsのサブディレクトリが使えないよっていう部分や、Liquidでのアセットファイルの読み込み方の部分が、標準的なwebサイトの手順とは異なります。
さすがにShopifyのテーマファイルをいじるようなポジションの人にそのあたりの心配はいらないかなーと思いますが、もしこの情報を探している人がここに来てくれているとしたら、この記事がお役に立てていれば嬉しいです。