お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
CMS-General

Font Awesome のインストール方法

更新日時 12月 13, 2018

対象製品

Marketing Hub Professional, Enterprise
Basic
HubSpot CMS

Font Awesome とは、サイズや色など CSS で変更できる属性のほとんどをカスタマイズできるスケーラブルなベクターアイコンのフォントのことです。以下の手順を実行するには、サイトでの CSS ファイルの編集にある程度の経験が必要です。

Font Awesome を HubSpot にインストールするには、次の手順に従ってください。

HubSpot でホストされる Font Awesome の使用方法

HubSpot でホストされる Font Awesome は常に最新であるとは限りません。このリストに含まれていない新しいアイコンにアクセスするには次の手順に従ってください

HubSpot でホストされる Font Awesome コードを CSS ファイルにコピーする代わりに、設定の [サイトヘッダー HTML] フィールドに同じコードを貼り付けるか、特定のページの head タグ 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;
}

Font Awesome の使用

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

例:

class="fa fa-facebook"

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

<h2>Font Awesome アイコンの例</h2>
<ul class="fa fa-ul">
<li><span class="fa fa-twitter"></span>Twitter Icon</li>
<li><span class="fa fa-list-ul"></span>List Icon</li>
<li><span class="fa fa-camera-retro fa-lg"></span>Camera Icon</li>
</ul>

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
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
group (alias)
hdd-o
headphones
heart
heart-o
home
inbox
info
info-circle
key
keyboard-o
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
lightbulb-o
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
music
pencil
pencil-square
pencil-square-o
phone
phone-square
picture-o
plane
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left

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
facebook-square
flickr
foursquare
github
github-alt
github-square
gittip
google-plus
google-plus-square
html5
instagram
linkedin
linkedin-square
linux
maxcdn
pagelines
pinterest
pinterest-square
renren
skype
stack-exchange
stack-overflow
trello
tumblr
tumblr-square
twitter
twitter-square
vimeo-square
vk
weibo
windows
xing
xing-square
youtube
youtube-play
youtube-square

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