どうも！今日も元気に、溺れる魚です！
現在、本ブログ「溺れる魚の絵空note.」のデザインを少しずつではありますが変更しています。
目次の表示を変更したり、タグやリストを見やすく変えたり、順調に進んでいるときはとっても楽しいものです。
そう、順調に進んでさえいれば・・・
またしてもCSSでの文字表記で病気が
ブログデザインを変更していく中でどうしても避けて通れないのがCSS&HTML
少し前に「【ブログ CSS】たかが蛍光ペン表示に尋常じゃないくらいハマった話」という蛍光マーカーを使えるようになるために3日を費やした 、というめちゃクソ恥ずかしーい記事をアップしましたが、今回はその続編です。
今回の敵は「Font Awesome」
いわゆる、アイコンフォントというやつです。
←こいつね。
今はもうできるようになったのですが、Font Awesomeを利用してアイコンを表示させようとすると特定の文字コードのアイコンだけがどうしても□に文字化けしてしまい表示できないという病気にかかってしまいました。
↓こんな感じに
こいつを治すのに、また2日という貴重な時間を費やしました。
今はできてます。
- ほら
- こんな感じに
- できてるでしょ？
この症状、不思議なのは特定のフォントだけが表示されない 、という所です。
上の画像を見てもらうとわかりますが、指差しとか吹き出しはしっかりと表示されています。
何故かチェックとか、特定の文字コードだけが□に文字化けして、表示されないんです。
原因はヘッダのCSS読み込みだった
原因を探っていくと、どうやら原因はダッシュボード > 設定 > 詳細設定 > ヘッダに要素を追加 の部分のCSSの読み込みタグにあったようです。
兎にも角にも、修正前と修正後のコードを御覧ください。
↓文字化け時のCSS表記
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
↓修正後のCSS表記
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/solid.css" integrity="sha384-Rw5qeepMFvJVEZdSo1nDQD5B6wX0m7c5Z/pLNvjkB14W6Yki1hKbSEQaX9ffUbWe" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/fontawesome.css" integrity="sha384-GVa9GOgVQgOk+TNYXu7S/InPTfSDTtBalSgkgqQ7sCik56N9ztlkoTr2f/T44oKV" crossorigin="anonymous">
正確には修正を行ったというか、 Font Awesomeの導入ページにあるCSSのコードの貼り付けをAll ではなく、Solidに変更しただけです。
こっちがALL
こっちがsolid
根本的な原因はわからずじまい
これで一応の解決は見せましたが、どうしてこれで修正できたのか、根本的な原因は全くわかっていません！
解決できたから良しとしていますが、もし原因がわかる方おられましたらコメントを心よりお待ちしておりますm(__)m
ではでは