この記事では、無料で利用が可能なアイコンフォント「Font Awesome」をはてなブログに導入する方法をまとめています。「Font Awesome」は、デザインで他のブログに差をつけられる最強アイテムなので、はてなブログのデザインにこだわりたい方はぜひ参考にしてみてください。
はてなブログに「Font Awesome」を導入する方法【はてなブログのカスタマイズ】
「Font Awesome」とは？
「Font Awesome」とは、絵のようなアイコンを文字として利用できるWEBアイコンフォントのことです。下記のマークは全て「Font Awesome」のアイコンで、文字と同じように色をつけたり、サイズを大きくしたりすることができます。
現在は、7865個のアイコンが登録されており、そのうち1609個を無料で使用することが可能です。(2023年1月時点)
「Font Awesome」をはてなブログに導入する方法
はじめに、下記のスクリプトコードをはてなブログの詳細設定ページにある「<head>要素にメタデータを追加」という項目に貼り付けます。このコードは、自分のブログにFont Awesomeを読み込ませるためのコードです。
スクリプトコード↓
<script src="https://kit.fontawesome.com/947bf9e8fd.js" crossorigin="anonymous"></script>
上のコードを「headに要素を追加」に貼り付けたら準備完了です。あとは、アイコンフォントを下記の一覧から選び、表示させたい場所に貼り付けます。
「Font Awesome」をブログデザインで表示させる方法
「Font Awesome」のアイコンは、HTMLのみで表示させる方法と、CSSを利用して表示させる方法の2パターンあります。どちらもとても簡単です。
HTMLを使って表示させる
HTMLを使って表示させる方法は、下のコードの 「クラス名」をアイコン一覧を元に書き換え、好きな場所に貼り付けるだけです。
<i class="クラス名"></i>
CSSを使って表示させる
CSSを使って表示させる場合、まず、以下のコードをアイコンを表示させたい場所に貼り付けます。
<span class="icon001"></span>
その後、以下のコードをカスタマイズのCSSデザインに貼り付ければ、表示させることができます。contentの ”＼(バックスラッシュ)"は絶対に消さないようにしてください。
.icon001 :before { font-family: "Font Awesome 5 Brands"; /* 重要 */
content: '\ユニコード'; /* 下のアイコン一覧から選ぶ */
font-weight: 900; font-size: 20px; }
記事の中に表示させたい場合
記事の中にアイコンを表示させたい場合は、下のコードを「記事を書く」のHTML編集ページに貼り付けてください。(はてな記法、Markdown記法の場合は、そのまま貼り付けてOK)
<em class="クラス名"> </em>
ブログで使えそうな「Font Awesome」のアイコン一覧
ブログのカスタマイズに使えそうな「Font Awesome」のアイコンを一覧にしてみました。「Font Awesome」には無料で使えるアイコンだけで1600個以上あるため、全てのアイコンを見たい方は下記のリンクから飛んでみてください。
| アイコン | アイコン名 | クラス名 | ユニコード |
|---|---|---|---|
| amazon | fab fa-amazon | f270 | |
| android | fab fa-android | f17b | |
| angle-right | fas fa-angle-right | f105 | |
| Apple | fab fa-apple | f179 | |
| arrow-right | fas fa-arrow-right | f061 | |
| bars | fas fa-bars | f0c9 | |
| camera | fas fa-camera | f030 | |
| camera-retro | fas fa-camera-retro | f083 | |
| check | fas fa-check | f00c | |
| check-circle | fas fa-check-circle | f058 | |
| check-square | far fa-check-square | f14a | |
| clock | far fa-clock | f017 | |
| cloud | fas fa-cloud | f0c2 | |
| comment | far fa-comment | f075 | |
| desktop | fas fa-desktop | f108 |
Font Awesomeが正しく表示されない場合の対処法
Font awesomeが正しく表示されない場合は以下の原因が考えられます。
Font Awesomeのバージョンが古い(又は新しい)
Font Awesomeのアイコンフォントは、バージョンによって大きく仕様が異なります。スクリプトコード(Font Awesomeを読み込むためのコード)が旧バージョンであったり、表示させたいアイコンのユニコード(クラス名)が古かったりするとすると、正しく表示されません。
font-familyが正しく指定されていない
CSSを使って「Font Awesome」のアイコンをカスタマイズする場合は、font-familyを正しく記述する必要があります。例えば、TwitterやFacebookなどのアイコンは、ブランド系のアイコンに数えられるため、font-familyを"Font Awesome 5 Brands"と記述しなければなりません。また、その他の無料で使えるアイコンについては、"Font Awesome 5 free"と記述する必要があります。
| クラス名 | font-family |
|---|---|
| fab から始まるアイコン | Font Awesome 5 Brands |
| fas(far)から始まるアイコン | Font Awesome 5 free |
contentsのユニコードの前に＼(バックスラッシュ)を付け忘れている
CSSでFont Awesomeを利用する際、ユニコードには、必ず＼(バックスラッシュ)を忘れないように付けましょう。
リゾートバイト歴は5年で、これまでに4つの職場を経験しました。海沿いにある旅館や、スキー場の中にあるホテルなど、宿泊施設をメインにリゾートバイトをしています。現在は長野県のホテルで彼女とリゾートバイトをしています。
