Font Awesomeのアイコンがちゃんと表示されない?!解決方法!!

どうも、クルルです!!
今回グローバルメニューにアイコンを表示させようと『Font Awesome』を利用したのですが、
ちゃんと表示されませんでした。(´・ω・`)
その際に1度諦めたのですが、やはりアイコンが使いたくなり調べた所・・・解決する事ができました!!
その時の事を記事にしましたので、同じ様に悩んでる方は是非読んでみて下さい!!


・Font Awesomeのアイコンがちゃんと表示されない?!


Font Awesomeを使う事でグローバルメニューに簡単にアイコンを表示させる事ができると知ったぼくは、『これは良いぞ!』と思い、すぐさま試す事に!!


Font Awesomeにはフリーで使えるアイコンが1,300個程あり、
どれを使おうか楽しみながら悩んでました♪(*´∀`*)
こんな感じのアイコンです!!




・Let’s Try!!そして失敗・・・。


やり方を書いてくれている人のネットを見ると、どうやらぼくの使っている『Simplicity』は、Font Awesomeをデフォルトで使えるようになっているようです。
アイコンを選択し、コードをコピーして設定完了!!
さっそくサイトを確認すると・・・。



う、うぅ〜うまくいってない!!(;_;)
全部ただの長方形になってる・・・。
ぼくは最近ブログのデザインで頭を使う事が多かったので、
ここで1度諦めました。笑


ですが後日、やっぱりアイコンを使いたい欲求が抑えられなくなり、
原因を調べてみる事に!!(`・ω・´)





・解決方法!!


どのアイコンを使ってもちゃんと表示されない・・・、
何か設定が必要なのか??


Font Awesomeのサイトを見ているとヘッダーに『How To Use』の文字が!!
ここを押すと・・・。




このような画面になりました。



ふむふむ・・・(´・ω・`)
どうやらこのコードを自分のサイトのヘッダーに貼り付けてね!って書いてあるようですね!!
でも『Simplicity』はデフォルトで使えるって見たんだけどなぁ〜と思いつつ試してみることに。

コードをコピーして、
ワードプレスの『外観 ⇒ テーマの編集』と進みます。


『編集するテーマを選択』の所で、『header.php』を選択して、
コードの中の<head></head>の間に下記のように貼り付けます。
※子テーマに『header.php』がない時は親テーマを選択。 ※ソースコードの変更をする前に、念のためテキスト等にバックアップをとっておいて下さい!


<head> <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.3.1/css/all.css” integrity=”sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU” crossorigin=”anonymous”> 
※こんな感じで貼り付けます!!
他にも沢山コードが書いてありますが気にせずに!!

</head>


貼り付けたら『ファイルを更新』を押して終了!!
サイトを確認すると・・・。




やったー!!\(^o^)/
ちゃんと表示されましたー♪♪



その他、ブログ関連での困った事はこちらです!!

文字背景の透明化が綺麗にできない?!解決方法はこちら!!

ワードプレスで広告の表示・ツイッターの埋め込み表示がおかしい!謎のArray表示!



・最後に


今回の原因としては、Font Awesomeの『How To Use』に書いてある手順を行っていなかった事でした。(^_^;)
そしてこのFont Awesomeはちょこちょことアップデートしているようで、その際に古いコードだと表示されなくなってしまうようです!!


日々新しく進化していくので、ぼくが最初に参考にした手順は古い情報だったのだと思います。 ぼくは果たして、今後周りの進化に付いていく事ができるのだろうか・・・。笑


以上、ここまで読んで頂きありがとうございました!!
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

『Font Awesomeのアイコンがちゃんと表示されない?!解決方法!!』へのコメント

  1. 名前:SEO(検索エンジン最適化)は必須 投稿日:2018/11/28(水) 14:47:53 ID:648e889d3 返信
    […] クルルさんの『クルル情報センター』 Font Awesomeのアイコンがちゃんと表示されない?!解決方法!! […]