BloggerでFont AwesomeをCDN経由で使う方法

2026/02/15

BloggerでFont AwesomeをCDN経由で使う方法

BloggerでSNSアイコンや装飾アイコンを表示したい場合、
もっとも簡単なのが Font AwesomeをCDNで読み込む方法です。

この記事では、

CDNでの正しい導入方法
Blogger特有のエラー回避方法
実際に使えるSNSボタンの完成コード
CSSでおしゃれに整える方法

まで解説します。

Font Awesomeとは？

Font Awesome は、Webサイトやブログで使える世界的に有名なアイコンライブラリです。
文字フォントのように扱える「アイコンフォント」形式で提供されており、HTMLにクラスを指定するだけで簡単にアイコンを表示できます。

最大の特徴は、画像ではなく「フォント」としてアイコンを扱える点です。そのため、HTMLにクラス名を指定するだけで表示でき、CSSで文字と同じようにサイズや色を自由に変更できます。画像ファイルを用意する必要がないため、管理がしやすく、表示も軽量です。

導入も簡単で、CDNを読み込むだけですぐに使えるため、Bloggerのカスタマイズにも適しています。デザイン性を手軽に高められる、非常に便利なツールです。

Bloggerでの導入方法

テーマのHTML編集画面の</head> の直前に追加します。


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"/>

BloggerはXMLを採用しているため必ず / で閉じてください。

実用例 : シンプルSNSボタン

HTML


<div class="sns-buttons">
  <a href="https://twitter.com/your_id" class="sns-btn twitter">
    <i class="fa-brands fa-x-twitter"></i>
  </a>
  <a href="https://youtube.com/" class="sns-btn youtube">
    <i class="fa-brands fa-youtube"></i>
  </a>
  <a href="/" class="sns-btn home">
    <i class="fa-solid fa-house"></i>
  </a>
</div>

CSS

  
.sns-buttons {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}

.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  transition: 0.3s ease;
}

/* 各SNSカラー */
.twitter {
  background: #000;
}

.youtube {
  background: #ff0000;
}

.home {
  background: #333;
}

/* ホバー */
.sns-btn:hover {
  transform: translateY(-3px);
  opacity: 0.8;
}

実用例 : ダウンロードボタン

HTML


<a href="#" class="download-btn">ダウンロード</a>

CSS


.download-btn::before {
  content: "\f019"; /* ダウンロードアイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 6px;
}

.download-btn {
  display: inline-block;
  padding: 10px 15px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

ダウンロード

アイコンコードの調べ方

Font Awesome公式サイトでアイコンを検索すると、
Unicode（例：\f007）が確認できます。

それを content: に指定すればOKです。

重要ポイント

font-family を必ず指定する
solidアイコンは font-weight: 900; が必要
brandsアイコンは "Font Awesome 6 Brands" を指定する

CSS設置のメリット

HTMLをシンプルに保てるため、
記事本文がスッキリする
再利用しやすい
デザインの一括管理ができる

特にBloggerのようにテンプレート管理を重視する環境では、
CSSで制御する方法はかなり実用的です。

まつさん
CDNのリンクで「/」を忘れないように!!
Font Awesome のバージョンが異なると文字化けするので注意!!

Blogger TIPS

2026/02/15