はてなブログでFontAwesomeが使えないときの対処法

はてなブログのHTML編集画面では、システムの好意から「空のタグは自動で削除される」というような特徴があります。また「spanタグで書いたのに勝手にpタグに変えられてしまうよう」というようなこともあります。これは記述ミスを防ぐための「はてな」なりの工夫なのだと思います。

HTML編集画面で貼付けたFontAwesomeのコードが消えてしまう？

問題はHTMLでFontAwesomeを使うときです。

対処法

iタグの中に を入れることで勝手に消えるのを防ぐことができます。例えば以下のように書きます。

これでプレビュー画面を確認すると、きちんと表示されるのが分かるかと思います。

注意点

ただし、いくつか注意点があります。

「見たまま編集画面」ではアイコンが表示されない

「プレビュー画面」では表示されるのですが、編集画面では表示されません。実際公開したときにはきちんと表示されるので問題はないのですが、作業がしづらいですね。これは受け入れるしかありません…。

それでもタグが書き換わる

書いたiタグが勝手にpタグや別のタグに変わってしまうことがあります。きちんと表示はされるので、これも受け入れるしかありません。

最後に

はてなの仕様変えてほしいですね。FontAwesomeの使い方はこちらの記事でイチから解説しています。