ロイヤルノート|でくのぼうのアロマでエスプレッソな雑記

でくのぼうのアロマでエスプレッソな雑記

超便利なアイコンフォント『Font Awesome』をはてなブログで使う方法

 

f:id:vintraw:20161107151537p:plain

自分でアイコンを作らなくても、自分のサイトに画像をアップロードしなくても使える、ミニマムで洗練されたアイコン。
そんな便利なアイコンが『Font Awesome』というアイコンフォントです。

これを導入して、ブログのいたるところで使ってみるとカンタンにおしゃれにできるでしょう。

---- INDEX ----

  SPONSORED LINK  

サイトにアクセス→メアド登録→コード取得

まずは公式サイトのGet startedページ  へいきましょう。

f:id:vintraw:20161106103939j:plain

こんなページが出てくるので、メアドを登録です。

f:id:vintraw:20161107131306j:plain

するとこんな感じのメールが届きます。
この部分にあなた専用のjsコードが記載されていますから、これを<head>内に書き込みましょう。
それだけでもう、ブログ内でFont Awesomeが使えるようになります。

はてブ最大の落とし穴!コードの書き方には注意

あとはFont Awesomeのアイコン一覧ページ  で好きなアイコンを探し、そのアイコンページに予め書かれている便利なアイコンコードを直接書き込むだけで本来ならアイコンが見えるようになるはずなのですが……。

<i class="fa fa-paw" aria-hidden="true"></i>

これですね。
こちら、ただ記載するだけでははてなブログでは表示されません

POINT1:<i>タグじゃなくて<span>タグで書かないと消えちゃう

はてなブログの管理ツールは、運営側が決めたルールが適用されています。
<i>タグを書き込んでも消されてしまうようになっているんです。
そこで、Font Awesomeで用意されている本来のタグのうち、<i>は<span>に変えちゃいましょう。

<span class="fa fa-paw" aria-hidden="true"></span>

POINT2:タグの間に何か入れないと消えちゃう

これまたはてなブログのルールで、タグに囲まれた中に何もない記述は自動的にタグごと消されてしまうんです。
そこでここは、HTMLの特殊文字で『空白』を表現するコード『&nbsp;』を入れてあげましょう。

<span class="fa fa-paw" aria-hidden="true">&nbsp;</span>

これで、記載的には問題なくなりました。

POINT3:編集のときは『HTML編集』モードじゃないと消えちゃう

あとはそもそも論ですが、コードを書き込む編集モードは『HTML編集』モードを選んでおきましょう。

そうしてようやく表示されるこれこそが、Font Awesomeの便利アイコンなのです。

<span class="fa fa-paw" aria-hidden="true">&nbsp;</span>

 

大きくしたいときには の中に『fa-5x』など予め決められているクラスを追記することでカンタンに大きく表示できます。

<span class="fa fa-paw fa-5x" aria-hidden="true">&nbsp;</span>

 『fa-lg』※33%大きくなる
 『fa-2x』
 『fa-3x』
 『fa-4x』
 『fa-5x』

以上、超便利なアイコンフォント『Font Awesome』をはてなブログで使う方法の備忘録でした。
みなさんもお気に入りのアイコンを使って、ブログを楽しくデコしてみましょう。