「はてなブログ」で使えるアイコンフォントとしてオススメなFont Awesomeをご紹介します。私のグローバルアイコンの「山登り」の左にも を追加してみました。
ただし、このフォントアイコンが「はてなブログ」では表示されないことがあります。「はてなブログ」には記述ミス防止のために空タグの自動削除機能がデフォルトで備わっています。
そのためにネットでWordPress向けに紹介されている手順で記述しても画面にアイコンが表示されなくて困っている方が多いようです。こちらの対処方法についても後述したいと思います。
Font Awesomeとは？
Font Awesomeは「はてなブログ」では足りない数百以上のアイコンが無料で使用できます。ただし、HTML環境での使用に限ります。
ブログで使えるアイコンの幅が大きく広がります！
FontAwesomeの使い方は？
下準備：コードをコピーし,headタグにコードを追加しましょう。
下記コードをコピーしましょう。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
「はてなブログ」の場合
管理画面の「設定」→「詳細設定」→「head要素を追加」でコードに貼り付け
「WordPress」の場合
「ダッシュボード」→「外観」→「テーマエディター」→右バー[header.php]
使用するアイコンフォントをFont Awesomeのサイトで探す
Font Awesomeで「hiking」と検索します。
すると下にアイコンの候補がずらーっと出てくるのが分かると思います。気に入ったアイコンをクリックしましょう。
この様にアップの画像がでてきます。左上にHTMLの構文があるので、コピーします。
「はてなブログ以外(WordPress等)」での通常の記述方法
先ほどコピーした構文
<i class="fas fa-hiking"></i>
WordPressであれば、このままの構文で使用できます。挿入したい場所に貼り付けて使いましょう。
「はてなブログ」での記述方法
はてなブログでは先に紹介した構文のままでは「空欄」になってしまい表示されません。そこで、「 」を構文中に追加してみましょう。
<i class="fas fa-hiking"> </i>
上記のように「 」をiタグの間に入れることで、アイコンが表示されるようになります。
もしくはemタグを使っても表示されるようになります。
<em class="fas fa-hiking"></em>
ハイキング
スノーマン
ウォーキング
「はてなブログ」のデフォルトアイコンの使い方も紹介してます。
まとめ
・「はてなブログ」でも「 」もしくは「em」タグでアイコンフォントの表示可能！
・Font Awesomeで「グローバルアイコン」や「ワンポイントアクセント」などブログの幅が広がります♪
