こんにちは、解説ゾロです！
⇧
コレ、Webアイコンフォントです！
特にCocoonテーマは「Font Awesome」のWebアイコンフォントを簡単に使うことができます・・・が、
行の先頭にWebアイコンフォントを表示しようとして、Webアイコンのコードを左端に入力しても、すぐにコードが消えてしまいWebアイコンフォントが表示できません。
何回やっても、消えてしまいます！笑
ホントはこんな風に、左端にアイコンフォントを表示させたいのですが・・・
とか、
デカ！
みたいに！
Font AwesomeのWebアイコンフォントのコードを書く場所
消えてしまう症状が同じであれば、速攻解決できると思いますので状況説明からはじめます。
解説用サンプルのアイコンフォントは冒頭に表示されている「解説ゾロ」の「（マスク）」を使って解説いたします。
このマスクのWebアイコンフォントのコードは、
<i class=”fas fa-mask”></i>
です。
コードを書く場所は、ワードプレスのいつも記事を書いている「投稿を編集」の画面の「ビジュアル」から「コード（以前のテキストです）」に変更した画面に書きます。
Font AwesomeのWebアイコンフォントのコードが消える状況
⇩行の先頭でなければ「ビジュアル」の右隣の「コード」の画面にWebアイコンフォントのコードを書けば、このように簡単に⇨を表示することができますが、
このWebアイコンフォントを左端に表示しようとして、
①のように「マスク」の「コード」の、
<i class=”fas fa-mask”></i>を左端に書き、画面を「ビジュアル」の画面に戻すと、その時だけは、マスクのWebアイコンフォントが表示されているのですが、再度、画面を変更したりするとコードが消えてしまい、Webアイコンフォントが表示されないのです。⇩
Font AwesomeのWebアイコンフォントのコードが消える原因
⇩Font AwesomeのWebアイコンフォントのコードを「行」の先頭に書くとコードが消えてしまう原因は、
①のように、<i></i>タグの間に何もない場合には削除されてしまうようです。⇩
プリンターの印字がかすれたら、超簡単なノズル洗浄をおすすめします！
Font AwesomeのWebアイコンフォントを行頭に表示する方法
それなら、<i></i>タグの間の、<i>ここ</i>に、何かを入力すれば消えないわけですが、例えばここに「あ」という文字を入力してみると、
あ
と表示されてしまい、Webアイコンフォントに余計な文字が一緒に表示されてしまいます。笑
そこで少し調べてみますと「 」を使う方が多いようです。
この「 」というのは、Non-breaking Spaceの略で、半角スペースを入れる場合に使う方もいらっしゃるようですが、本来は行末で、文字の途中などで勝手に改行されないように指令する特殊な文字のエンティティというものです。
例えば、キーボードのスペースキーで半角スペースを<i></i>タグの間に入れたとしても、同じように消えてしまいますので、やはり「 」が良いようです。
マウスで手首を痛めている方には、特にこのマウスを真剣におすすめします！
「 」を入力すると行頭でも表示される
実際にコードの画面に入力してみます。
このWebアイコンフォントのコードを、コードを入力するコードエディターの左端に書くと
<i class=”fas fa-mask”> </i> となり「ビジュアル」の画面に戻すと、
がちゃんと表示されます。再度「コード」の画面に変更したりしても入力したコードは消えません。大成功です！
この場合の「 」は、半角の空白文字で繋げるみたいな役目・・・？
「 」を入力することで、簡単に行頭にWebアイコンフォントが表示されました。この方法が一番簡単かなと思います。お疲れさまでした。
ケンジントン 【正規品・5年保証付き 日本語パッケージ】 SlimBlade Trackball 72327JP
まとめ
とっても楽しい、Webアイコンフォントを使うとアイディア次第で個性のあるブログやボックスメニューが簡単に作れます。
今日は、特に行の先頭にWebアイコンフォントを表示させたい時の方法を解説いたしました。これで、もうどこにでもWebアイコンフォントを表示することができます・・・よね！笑
さらに、Font Awesome 5アイコンは、 こんなこともできちゃいます！
楽しいので、やってみてくださいませ！
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：簡単！CocoonでFont Awesome 5アイコンの色やサイズを変更
関連記事：Cocoon本文にWebアイコンフォントを表示する簡単カスタマイズ
関連記事：ボックスメニューが簡単にできた！Cocoonカスタマイズ
関連記事：HTMLで特殊文字の「 」をそのままブログに表示させる方法
