📝

はてなブログでFont Awesomeが表示されない時の対処法

はてなブログではHTMLでFont Awesomeのアイコンが表示されない場合があります。これはCSS編集の画面では起きませんが、記事用エディターのHTML編集ではよく起きます。しかし対策法が無いわけではありません。


そこで今回は、はてなブログでFont Awesomeが使えないときの対処法を紹介します。実際にどのように使えなくなるのかも紹介するので、参考にしてみてください。

貼り付けたコードが消えてしまう

まずは普段どおりHTMLにアイコンのコードを貼ります。(1番下のコード)

image1


見たまま編集モードに変えます。

image2


HTML編集モードに戻すと、先程書いたアイコンのコードが消えています。

image3


コードを加えることで解決

<i></i>の間にコードを追加するだけで消えるのを防げます。

<!-- &nbsp;を追加する -->
<i class~>&nbsp;</i>

コードを追加するとHTML編集モードで確認したときに<i>タグが勝手に<p><em>タグに変わってしまいますが、プレビューではきちんと表示されているので無視して大丈夫です。僕の場合は下のように変わっていました。

<p><em class~></em></p>






WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation