はてなブログで記事を書くときに、FontAwesomeを使う方法
はてなブログで記事を書くときに、FontAwesomeを使おうとすると表示されないんですね。
どうやら、そのまま記述するだけでは自動で削除されちゃうみたいです。
ということで、はてなブログで記事を書くときにFontAwesomeを使う方法について調べてみたら、さすがの「サルワカ」さん。
⇒はてなブログでFontAwesomeが使えないときの対処法ーサルワカー
結論から言うと、FontAwesomeのタグで「 」を挟めばいいみたい。
例えば、「 を表示させたい！」と思った時。 <i class="fa fa-pencil"></i>って書いちゃうと、自動で削除されちゃうので下記のように記述します。
<i class="fa fa-pencil"> </i>
FontAwesomeのアイコンは、「見たまま編集」の画面だと表示されませんが、「プレビュー」の画面では確認できるので、ちゃんと表示されているかはプレビューで確認しましょう。
「HTML編集」では、記述した内容が<em class="fa fa-pencil"> </em>といった感じに書き換わったりしますが、アイコン自体はちゃんと表示されるので問題ないと思います。
記事にFontAwesomeが使えると、いろんなことができて楽しいですね。
切り取り線とか
----------------------------- -----
-----------------------------<i class="fa fa-scissors"> </i>-----
ちょっとした見出しなんかも、それっぽいものが作れますし
ここがポイント いますぐチェック 要注意
<span style="color: #ff5252;"><strong><i class="fa fa-exclamation-circle"> </i>ここがポイント</strong></span> <strong><i class="fa fa-hand-o-down"> </i>いますぐチェック</strong> <strong><span style="color: #f9ce1d;"><i class="fa fa-exclamation-triangle"> </i>要注意</span></strong>
山間部の家とかも表現できる
<i class="fa fa-tree fa-2x"> </i><i class="fa fa-tree"> </i><i class="fa fa-tree fa-lg"> </i> <i class="fa fa-home fa-3x"> </i><i class="fa fa-female"> </i><i class="fa fa-male"> </i> <i class="fa fa-tree fa-lg"> </i><i class="fa fa-tree"> </i><i class="fa fa-tree fa-2x"> </i>
楽しい！！！
cssを設定するほどでもないけど、ちょっとしたアクセントが欲しい時なんかには便利かもしれませんね。
FontAwesomeのそもそもの導入方法のついても、「サルワカ」さんがとても分かりやすいです。
以上、この記事が何かの参考になれば幸いです。
それでは。
