【rails】fontawesomeが表示されない

いつもお世話になります。
fontawesomeの導入について質問です。

現在、以下のHTML及びCSS等を記述していますが、アイコンが表示されません。
具体的にはユーザー名や投稿時間の前にアイコンを表示したいのですが、チュートリアル通りにやっても表示されない状態です。

ネット上には、よくアイコンが表示されない現象が起きるということでいろいろな解決法がのっており、私もいくつか試しましたが、解決できない状態です。

##ソースコード（関係するところを抜粋）

index.html.erb

rb
1<div class="content-right">
2    <p class="post.user"><%=  link_to post.user.name, post.user %></p>              
3    <p class="post.time"><%= post.created_at.to_s(:datetime_base) %></p>
4</div>

index.scss

rb
1.post.user:before{
2  font-family: "Font Awesome 5 Free";
3	content : "\f293";
4	font-weight: 900;
5  }
6
7.post.time:before{
8  font-family: "Font Awesome 5 Free";
9	content : "\f017";
10	font-weight: 900;
11  }

application.scss

rb
1@import "font-awesome";
2@import 'font-awesome-sprockets';
3
4

Gemfile

rb
1gem 'font-awesome-sass', '~> 5.4.1'

##試したこと
・scssにてfont-weightを900、boldなどの記載をするが変化なし（ネット上で見られる非表示解決方法）

##参考にしたチュートリアル
gem 'font-awesome-rails'は最新版に対応してない... 代わりにfont-awesome-sassを使おう!
Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法

##現在の環境
AWSのcloud9を使用しています。
rubyのバージョンは 2.4.1p111
railsのバージョンはRails 5.0.7　です。

どなたか、解決策をご助言いただけないでしょうか。
よろしくお願いします。

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

回答1件

ベストアンサー

同じ環境を再現できないので一般論の範囲での回答になりますが、いくつかポイントをお出ししてみます。ご参考になさってください。

class="post.user" というクラスの指定方法はあえてこのようにされていますか？パッと見たところでは class="post user" あるいは class="post-user" の間違いではないかと思いました:

html
1    <p class="post.user"><%=  link_to post.user.name, post.user %></p>

SCSS/CSS スタイルのデバッグをしたいときは、問題を細かく切り分けることが有効です:

a) 対象の css ファイルが正しく生成されているか？（例えば、エディタでファイルを直接見る）
b) 対象の css ファイルがページに読み込めているか？（例えば、 index.scss に body { background-color: red; } と書いて効くかどうかを見る）
c) セレクタが間違っていないか？（例えば、 .post.user { background-color: red; } と書いて効くかどうかを見る）
d) FontAwesome が読み込めているか？（例えば、実際に描画された HTML や CSS のソースを見る）
e) FontAwesome の使い方が間違っていないか？（公式ドキュメント等を改めて確認する）

今回はおそらく上の class="post.user" が主原因ではないかと思いますが、そこを調整しても解決しない場合は a) 〜 e) に切り分けてチェックされてみてください。

尚、今回は問題の原因ではないと思いますが、利用している gem に問題がある可能性もありますので、場合によってはそのイシューキューもチェックされてみてもよいかもしれません。

以前 teratail 上で同様の質問に回答をしたことがあり、そちらもご参考になるものと思います。ご覧になってみてください: