この様ですが

はてなブログ記事中にFont Awesome 表示されない問題 ※追記有

Sponsored Link

f:id:somekaosanai:20170219005110j:plain

好きな、WithBはダイキさん派
おさない(@osanai_desuga )です
 
みなさんは、Font Awesomeというサービスをご存知だろうか?
ウェブサイトやブログで文字と同じようにアイコンを表示する事ができるサービスだ
色もサイズも指定すれば変更可能!
アニメーションも指定することができる、すごいサービスなのだ
 
導入までの流れは、【サルワカ:Font Awesomeの使い方まとめ】にて▼
私の稚拙な説明より断然わかりやすい
サルワカくんいつも、お世話になっております
感謝!

そのアイコン消えるよ

Font Awesomeを導入し、はてなブログの記事中にアイコンを使用しようと
【HTML編集】にて使用したいコードを打ち込んだ
表示されているか確認する為、右隣のプレビューをクリック
…あれ?
何度確認しても、プレビューには何も表示されていない
しかも、HTML編集に戻ってコードを確認しようにも、コードが消えてしまっている
 
(´・ω・`)?
 
まさにこんな表情をしていた
マルチコピー機の記事を編集している時に、Twitterアイコンを表示させて
アニメーションつけてみようと編集しても青い小鳥がでないのだ
 
Google先生に聞いてみた
 
『 Font Awesome 表示されない 』
検索結果は無情にも、私の欲しい答えがヒットしない
<head>にコピペするコードやバージョンの記入ミスではない

アイコンは、決して消えたりなどしない

はてブのコード編集が問題なのか?そんなルールあったけ?と思い検索
編集見たまま編集を愛用している私には盲点だった(編集モード:見たままモード)
はてブのHTML編集には癖があったようで、以下の記事を参考にさせていただいた
 
Royal Naught様 ▼
はてなブログ記事中にアイコンを表示させるには、タグの変更と
タグの間に『空白』のコードを入れること
この作業をしないと、消えるサーブみたいにアイコンコードごと
消えてしまうので注意!
 
ちなみに、Font Awesomeでメールアドレスを送って、返信されてくるコードを
<head>に追加しなくても以上のタグ変更と空白コードを記入すれば問題なく
はてなブログの記事中では、表示を確認できました
(検索中多くのサイトで改善策として挙げられていた)
 
無事Twitterアイコンを表示できました!
最後に、今回参考にさせていただきました方々には、厚くお礼申し上げます
 
おいとまっ!

2017/02/20 追記

お世話になっております。
仕様確認を怠っておりました。
まだまだ、勉強不足だと痛感いたしました。
ご指摘ありがとうございます!

関連記事