FontAwesomeが使えない!コードが消える時の対処法

せっかくFont Awesomeを設定したのに、
記事内の編集画面に書いたコードが消えてしまう!
という現象が起こります。

私はWordPressの記事作成画面内で起こりましたが、
はてなブログでも同様の現象が起こるようです。

調べたらちょっとしたことで解決したのでまとめておきます!

Font Awesomeのコードが消える!

Font Awesomeってあまり文中で使うことは無いのですが、
記事作成画面でFont Awesomeを使ったらこんな現象が起きました。

1.テキストモードでコードを入力↓

font awesome,コード,消える,wordpress

 

2.プレビュー画面で見てみると

font awesome,コード,消える,wordpress

ちゃんとFont Awesomeのアイコンが表示されています。

 

3.プレビュー画面で見てみると

よしよし♪
と思ってビジュアルモードにして記事作成を再開。

再度プレビューしてみると…アイコンがない!!!

テキストエディタを確認するとさっきまであった
Font Awesomeのコードが綺麗サッパリ消えてしまっていますww

font awesome,コード,消える,wordpress

なんでやねん。。。

という現象が起きていました。

コードが消えてしまう時の対処法

コードが消えてしまう原因

そもそもなぜコードが消えてしまうかというと、

WordPressには空のタグを自動的に削除するというphpが
デフォルトで実装されているから

だということがわかりました。

空のタグというのはこういうこと↓

font awesome,コード,消える,wordpress

<i></i>タグの間に何もテキストが無い空の状態だと、
タグの入力ミスと判断して削除されてしまうのです。

ということはつまり…!???

そう、この<i></i>タグの間に何かしらを入力すればOKということ!

コードが消えてしまう時の解決方法

ということでタグの間に、

&nbsp;

を入力しましょう。

当然ながらアイコンタグの間にテキストは入れられないので、
「空白」のコードを入れるんですね。

こんな感じ↓

font awesome,コード,消える,wordpress

これでFont Awesomeのコードが勝手に消えなくなります!

ひゃほーーーー♪

色々調べていると、
空のタグを自動的に削除するコード自体を
phpファイルから削除してしまおう!という記事もありました。

ですがデフォルトで実装されている機能ということは、
この空タグ自動削除は必要な機能だということです。

間違って必要ないHTMLを削除した時に、
誤って空になったタグだけ残ってしまうこともあるはずです。

なので

この機能自体は残しつつ、
Font Awesomeを空タグにしない、

という方法で対処するのが一番良いかと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Scroll Up