「Blogger」ブログでFont Awesomeのアイコンを使いたい
 |
スタイルシートを読み込む
「Font Awesome」のアイコンを使用する前に、スタイルシートを読み込むようにしなくてはいけません。
以下のようにスタイルシートを読み込むためのソースを、テンプレート内の<head>～</head>内に追加する必要があります。
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet">
追加出来たら、一度テンプレートを保存し、次に追加したいアイコンを探します。
ちなみに、「v5.15.3」は、サイトに現在のバージョンが記載されているので、そちらを参考に変更するだけで、最新のスタイルシートに変更できます。
 |
「Font Awesome」のサイトでアイコンを探す
以下のURLから、「Font Awesome」のサイトにアクセスします。
- 【外部URL】https://fontawesome.com/
次に、トップページ上部のメニューにある「icons」をクリックすると、アイコンの一覧が表示されます。
 |
今回は、矢印のアイコンを例に説明してきます。
 |
検索窓に、アルファベットで欲しいアイコン名を検索します。（日本語は不可）
例えば「矢印」を探したいのであれば、「arrow」と検索窓に入力し、検索してみてください。
欲しいアイコン「angle-right」が見つかったら、アイコンをクリックします。
 |
アイコンの詳細ページに移動し、上の方「f105」と「<i class="fas fa-angle-right"></i>」とあるのですが、この2つが、ブログで使用する際に必要になります。
「Font Awesome」の使い方
自分のブログを例に説明すると、スライドショーの矢印に使用しているこの「f105」をスタイルシートで使用する場合、アイコンを表示させたい場合は、「f105」を使用します。
下のような感じに記述します。
.flex-direction-nav a:before {
font-family: "Font Awesome 5 Free";
font-size: 40px;
display: inline-block;
font-weight: 700;
content: '\f104';
}
.flex-direction-nav a.flex-next:before {
content: '\f105';
font-family: "Font Awesome 5 Free";
font-weight: 700;
}
意外と重要なのは、「font-weight:」です。こちらの記述がないと、アイコンが表示されないことがありました。
font-familyには「Font Awesome 5 Free」と記述したほうが良いようです。
自分のブログの場合は、メニューに使用しています。特別難しいことはないですが、ご希望のアイコンがない場合もあるので、使用する際は、事前に調べてから使用する方が良いでしょう。
