HubSpot で Font Awesome をインストールする

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

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

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

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

Font Awesomeを手動でインストールして使用する

HubSpotでFont Awesomeを手動でインストールするには、サイトでスタイルシートを編集する必要があります。HubSpotでFont Awesomeを手動でインストールして使用するには、まずFont Awesomeをファイルマネージャーにアップロードし、Font Awesomeを使用するためにHTML要素をアップデートする必要があります。

 Font Awesome をファイルマネージャーにアップロードする

• http://fontawesome.io/ から HubSpot で使用する Font Awesome のバージョンをダウンロードして、コンピューター上のフォルダーに解凍します。
• font-awesome.css ファイルを開いて、その内容をコピーします。
• このファイルの内容を HubSpot のスタイルシートに貼り付けます。
• ブラウザーで新しいタブを開き、ファイルマネージャーにアクセスします。HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［ファイル］の順に進みます。ここでは、Font Awesome CSS の [フォントパス] セクションで参照される Font Awesome フォントファイルすべてをアップロードします。
• これらのファイルを HubSpot ファイルマネージャーにアップロードしたら、各ファイルの URL をコピーして、CSS のすべての相対リンクを対応する各ファイルのファイルマネージャー URL に置換します。最終的なコードは次のようになります。ただし、URL は自分のファイルマネージャーからコピーした URL です：

/* FONT PATH
 * -------------------------- */
@font-face {
 font-family:'FontAwesome';
 src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?v=4.7.0');
 src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn2.hubspot.net/hubfs/HUBID/Font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

• すべての相対 URL が置換されたら、スタイルシートで [変更を公開] をクリックします。

Font Awesome の使用

HubSpot でホストされる Font Awesome を参照するか、ポータルに自分のファイルをアップロードしたら、Font Awesome をコンテンツに使用することができます。Font Awesome は、class="fa" を持つ要素と、レンダリングするアイコンのクラス固有の要素に適用されます。

例：

class ="fa -facebook "

Font Awesome アイコンはEメールでは機能しません。また、要素は HubSpot WYSIWYG エディターのソースコードとは併用できません。Font Awesome アイコンを実装する場合は、以下の例に示すようにタグを使用することをお勧めします。

Font Awesome アイコンの例

• Twitter アイコン

• リストアイコン

• カメラアイコン

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

注： HubSpot でホストされる Font Awesome のバージョンは最新ではありません。新しいアイコンを使用するには、自分のフォントファイルをファイルマネージャーにアップロードして、@font -face 参照を src url に置き換える必要があります。