HubSpotでFont Awesomeを使用する

Font Awesomeは、サイズや色などCSSで変更できる属性のほとんどをカスタマイズできるスケーラブルなベクターアイコンのフォントです。HubSpotでFont Awesomeを使用する最も一般的な方法は次の2つです。

• カスタムモジュールでのアイコンフィールドの使用
• Font Awesomeキットの使用

注：Eメールクライアントの大半ではウェブフォントが表示されないため、Font AwesomeアイコンはEメールでは機能しません。Eメールでアイコンを使用するには、代わりにアイコンを画像に変換してから画像をEメールエディターに挿入する必要があります。 

カスタムモジュールでアイコンフィールドを使用する

カスタムモジュールにアイコンフィールドを追加することにより、インストール済みのFont Awesomeアイコンを選択できます。カスタムモジュールにアイコンフィールドを追加するには、次の手順を実行します。

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• 左のサイドバーでファインダーから、既存のカスタムモジュールを選択します。または、新しいカスタムモジュールを作成します。
• 右側のサイドバーの［フィールドを追加］をクリックしてモジュールにアイコンフィールドを追加し、［アイコン］を選択します。
  
  
• 既定値とエディターのオプションを設定することで、フィールドをさらにカスタマイズできます。モジュールフィールドのカスタマイズについて、詳細をご確認ください。
• 右側のサイドバーのフィールドにカーソルを置いて、モジュール本文にアイコンフィールドを追加し、［アクション］をクリックします。［スニペットをコピー］を選択し、アイコンを表示するHTML + HUBLセクションにスニペットを貼り付けます。
  
  
• 右上の ［公開］ をクリックします。
• これが新しいモジュールである場合は、アイコンを使用するテンプレートにモジュールを追加します。右上の［公開］をクリックしてテンプレートの変更を公開します。
• これで、デザインマネージャーまたはページエディターから、カスタムモジュールでFont Awesomeアイコンを選択できるようになりました。
  
  

Font Awesomeキットを使用する

サイト全体でFont Awesomeアイコンを追加することができます。そのためには、Font Awesomeキットを作成し、HTMLのheadにコードを追加して、ページにアイコンを追加します。Font Awesomeキットについての詳細をご確認ください。

• まずは、Font Awesomeのウェブサイトでキットを作成します。キットを作成したら、HubSpotに追加できるコード行が得られます。コードは次のようなものになります。

  <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

• HubSpotで、キットコードをサイトのHTMLのheadに貼り付けます。これにより、サイトのHTML headの編集時に選択するサブドメインに応じて、すべてのページでFont Awesomeが利用可能になります。Font Awesomeを1つのページのみに追加するには、キットコードを個別のページのHTML headに追加することもできます。

ページにアイコンを追加する

ページにアイコンを追加するには、コンテンツHTMLを編集して、Font Awesomeのクラスを要素に割り当てる必要があります。HubSpotの場合は、カスタムモジュールまたはコーディングファイルの編集、ブログテンプレートの編集、またはページエディターでリッチ テキスト モジュールのソースコードの編集をすることになります。

アイコンごとに、クラスの宣言に対して2つの部分があります。

• アイコン名（プレフィックスがfa-）。例：fa-camera
• スタイルプレフィックス。例：fas。 

Facebookなどのブランドアイコンについては、fabのスタイルプレフィックスを使う必要があります。例：

class="fab fa-facebook"

アイコンを挿入する際には、<i>要素または<span>要素のいずれかを使用することができます。以下の例では、どちらの方法も動作します。

<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>

コンテンツの中でFont Awesomeアイコンを使用するための基本についてご確認ください。

HubSpotでホストされるFont Awesomeのアイコン