HubSpotでFont Awesomeを使用する
更新日時 2020年 10月 19日
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のアイコン
adjust anchor archive arrows arrows-h arrows-v asterisk ban bar-chart-o barcode bars beer bell bell-o bolt book bookmark bookmark-o briefcase bug building-o bullhorn bullseye calendar calendar-o camera camera-retro caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up certificate check check-circle check-circle-o check-square check-square-o circle circle-o clock-o cloud cloud-download cloud-upload code code-fork coffee cog cogs comment comment-o comments comments-o compass credit-card crop crosshairs cutlery dashboard (alias) desktop dot-circle-o download edit (alias) ellipsis-h ellipsis-v envelope envelope-o eraser exchange exclamation exclamation-circle exclamation-triangle external-link external-link-square eye eye-slash female fighter-jet film |
filter |
quote-right random refresh reply reply-all retweet road rocket rss rss-square search search-minus search-plus share share-square share-square-o shield shopping-cart sign-in sign-out signal sitemap smile-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down (alias) sort-numeric-asc sort-numeric-desc sort-up (alias) spinner square square-o star star-half star-half-empty (alias) star-half-full (alias) star-half-o star-o subscript suitcase sun-o superscript tablet tachometer tag tags tasks terminal thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) trash-o trophy truck umbrella unlock unlock-alt unsorted (alias) upload user users video-camera |
volume-down volume-off volume-up warning (alias) wheelchair wrench check-square check-square-o circle circle-o dot-circle-o minus-square minus-square-o plus-square plus-square-o square square-o bitcoin (alias) btc cny (alias) dollar (alias) eur euro (alias) gbp inr jpy krw money rmb (alias) rouble (alias) rub ruble (alias) rupee (alias) try turkish-lira (alias) usd won (alias) yen (alias) angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up |
chevron-down chevron-left chevron-right chevron-up hand-o-down hand-o-left hand-o-right hand-o-up long-arrow-down long-arrow-left long-arrow-right long-arrow-up toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) arrows-alt backward compress eject expand fast-backward fast-forward forward pause play play-circle play-circle-o step-backward step-forward stop youtube-play adn android apple bitbucket bitbucket-square bitcoin (alias) btc css3 dribbble dropbox facebook-square flickr foursquare github github-alt github-square gittip google-plus google-plus-square html5 linkedin-square linux maxcdn pagelines pinterest-square renren skype stack-exchange stack-overflow trello tumblr tumblr-square twitter-square vimeo-square vk windows xing-square youtube youtube-play youtube-square |