Font Awesomeが反映されない

###前提・実現したいこと
ワードプレスでブログを書いていて、Font Awesomeを使いたいのですがアイコンが表示されないです。
固定ページではしっかりと表示されるのですが、新規投稿からだと表示されないです。

###発生している問題・エラーメッセージ

チェックのアイコンを入れたいのですが、チェックが表示されず、正方形のようなアイコンが表示されてしまいます。

###該当のソースコード

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
これをheadタグ内に貼付けに貼付けました。


CSSを使って編集しました。
.box77 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
.box77:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}
これを<div class="box77"></div>のような感じで書きました。

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)

退会済みユーザー

2017/12/21 01:14

使用しているテーマ名を追記してください。　また、FontAwesomeのアイコンはどのように適用しているのですか？（<i>タグを挿入？CSSでUnicodeを指定？）どちらにせよHTMLのソースコードを追記してください。

puyopuyo

2017/12/21 08:39

ご回答有り難うございます。CSSで指定しました。

行動規範の内容に同意します

回答2件

ベストアンサー

HTML, CSS共に問題なさそうなので、単純にFontAwesomeのCSSファイルが読み込まれていないような気がしますが
試しに新規投稿で下記コードを書いたらWordPressのアイコンが表示されますか？

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-wordpress"></i>

投稿2017/12/21 08:48

退会済みユーザー

総合スコア0

puyopuyo

2017/12/21 09:17

ご回答ありがとうございます。ワードプレスのWのロゴが表示されました。

退会済みユーザー

2017/12/21 09:19

でしたら、Rykiel727さんも仰っているように、なんらかの理由でfont-awesome.min.cssが投稿ページでは読み込まれてないですね。 header.php内での記述を見直した方が良さそうです。

puyopuyo

2017/12/25 11:06

ご回答ありがとうございます。 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> このように貼付けしました。

puyopuyo

2017/12/25 15:24

すみません。記述の見直し方がよくわからないです。どのような箇所を変更すればよろしいでしょうか？

puyopuyo

2017/12/30 15:35

行動規範の内容に同意します

最低限のソースコードで、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
	
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
.box77 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}
.box77:before{
  font-family: FontAwesome;/*忘れずに*/
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}
</style>
</head>
<body>
	<div class="box77"></div>
</body>
</html>

これを実行したところ青いチェックアイコンが表示されました。
固定ページでは出るが、投稿記事ページで出ないということであれば、
可能性としては3つほど思い当たります。

プロパティを書いているCSSより後にfont-awesome.min.cssを読み込んでいる。
テンプレート判定等で、single.phpでは、font-awesome.min.cssが読み込まれていない。
プロパティを記載しているCSSを single.phpで読み込んでいない。

CSSの読込順序とファイルがちゃんと読まれているかを確認したほうがよいかもしれません。

投稿2017/12/21 08:53

Rykiel727

総合スコア66

退会済みユーザー

2017/12/21 09:02 編集

> プロパティを書いているCSSより後にfont-awesome.min.cssを読み込んでいる。この可能性は本当にありますか？ <link rel="stylesheet" href="style.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> とした場合や、極端にFontAwesomeのCSSだけ</body>直前に移動しても表示されるような気がしますが。

puyopuyo

2017/12/21 09:20

ご回答ありがとうございます。ファイルの読み込みを確認してみます。