COS-General

Font Awesomeのインストール方法

更新日時 December 1, 2016

Font Awesomeとは、スケーラブルベクターアイコンのフォントのことで、サイズや色などCSSで変更できるアトリビュート(属性)のほとんどをカスタマイズできます。Font AwesomeをCOSにインストールするには次の手順に従ってください。

  • こちらのHubSpotでホストされているFont Awesomeファイルのコードをすべてコピーします。必ずすべてのコードをコピーしてください。
  • コピーしたコードをCSSファイルに貼り付けます。具体的な手順:[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]の順に移動し、スタイルシートを探してアクセスし、手順1でコピーしたコードをスタイルシートに貼り付け、適切に保存します。
  • CSSファイルを公開します。

これでFont Awesomeを使用できるようになりました。Font Awesomeはclass="fa"と表示するアイコン特有のクラスと一緒に要素に適用されます(例:class="fa-facebook")。Font AwesomeアイコンはEメールでは機能しません。

また、要素をHubSpotのライブ反映機能エディターのソースコードと一緒に使用することはできません。Font Awesomeアイコンを実装する際は、以下の例のようにタグを使用することをお勧めします。

Font Awesome Icons Example



  • Twitter Icon

  • List Icon

  • Camera Icon

HubSpotのデフォルトHubthemeをお使いの場合、Font Awesomeはすでにhubtheme-foundation.cssに含まれており、こちらの記事で説明するショートコードを使用してフォントアイコンを表示できます。ショートコードはHubthemeのみでご利用いただけます(特別なJavascriptファイルが必要です)。

手順1~3の代わりに

Font Awesomeコードを既存のCSSファイルにコピーする代わりに、以下のリンクタグをContent Settings(コンテンツ設定)セクションまたはTemplate Head Tag HTML(テンプレートヘッドタグHTML)セクションのヘッドタグに追加できます:

http://designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css" rel="stylesheet">

HubSpotでホストされているFont Awesomeは常に最新であるとは限らないことに注意してください。こちらの一覧にない最新のアイコンを使用する場合、File Manager(ファイルマネージャー)に自分のフォントファイルをアップロードし、@font-faceリファレンスをsrc urlと入れ替えます。

関連記事: