はじめに
「shopify fontawesome」でググった時に日本語の記事1件、qiitaでは記事が見当たらず、3時間ほど溶かしたため(・ω・;)書いておきます。
shopifyでFontAwesomeを使う場合、以下の２パターンに大別されるはず。
- FontAwesomeのファイルをassetsに格納して呼び出す
- CDNをテーマファイルに記述する
動作環境に左右されづらい、１が推奨だが、自分の環境ではAseetsに格納して呼び出すことができなかったため、2で対応しました。
以下の環境で動作確認済。
shopifyテーマのバージョン : Dawn 11.0.0
FontAwesomeバージョン: 6系（v6.2.1）
※ 使用するFontAwesomeアイコンは無償版のみ
導入手順
theme.liquid の<head>タグ内に以下の一文を挿入
<!-- この一文を挿入 -->
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.1/css/all.css">
theme.liquid
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">
<!-- この一文を挿入 -->
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.1/css/all.css">
...
以上。後は、FontAwesomeを使いたい箇所にFontAwesomeのhtml記法<i class=""></i>を記述するだけ。
FontAwesomeアイコンを画面に表示する
以下は、shopifyのコード編集を始めて触る方向けの参考例。
FontAwesomeアイコン用snippetsを作成する(liquidファイル)
例としてFontAwesomeアイコンcircle-arrow-upを使用
※ 自前の作成クラスを併用する場合は、class = custom-cssの記述を参考。
font-awesome.liquid
<i class="fa-solid fa-circle-chevron-up fa-3x custom-css" style="color: #424242;"></i>
<style>
.custom-css{
position: fixed;
bottom: 15px;
right: 10px;
background-color: white;
border-radius: 28px;
}
FontAwesomeアイコンを埋め込む
theme.liquidの</body>タグ直前に以下の記述を挿入
theme.liquid
...
<!-- FontAwesomeアイコン -->
{% render "font-awesome" %}
</body>
</html>
"font-awesome"がFontAwesomeアイコン用snippetsのファイル名に対応しています。
以下のようにshopify画面のヘッダー右下にFontAwesomeアイコンが表示されていれば成功です。
参考記事
ShopifyにFont Awesome（無料版）を導入する
Can't Get FontAwesome Brand Font To Work In Footer