FontAwesomeがcssで表示されない

前提・実現したいこと

FontAwesomeをcssで読み込んで表示させたいです。
実際にWebページを確認すると鎖のようなアイコンが表示されてしまいます。

該当のソースコード

.fa-link::before {
    content: "\f002";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

<!DOCTYPE html>
<html  lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ototudoi</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  </head>

  <body>
    <%= render 'layouts/navbar' %>

    <div class="container">
      <%= render 'layouts/flash_messages' %>

      <%= yield %>
    </div>
  </body>
</html>

試したこと

・unicodeの前にバックスラッシュがついている。
・最新verのFontAwesomeCDNのコードを公式HPからコピー。
・solidのアイコンなのでfontweightに900を指定している。
・無料のver5のアイコンなので、font-familyに"Font Awesome 5 Free"を指定している。

##追記
開発ツールのキャプチャです

退会済みユーザー

2020/11/29 02:54

webブラウザに備わる、開発ツールやデベロッパーツールを駆使して、FontAwesomeの読み込みが成功しているか、確認できますか？

doichek

2020/11/29 03:25

確認方法がわかりません。間違っているかもしれませんが、それらしきものが発見できたのでキャプチャを貼りました。

ikadzuchi

2020/11/29 03:25

何が表示されるべきなのですか?

doichek

2020/11/29 03:29

虫眼鏡のアイコンです。

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

回答1件

自己解決

自己解決しました。
クラス名が原因だったようです。
クラス名を"fa-link"としていたのですが、これはFontAwesomeの鎖アイコンとして定義されているクラスでした。
クラス名をFontAwesomeで定義されていないクラス名(例えばtestとか)にしたらunicodeで定義されたアイコン(今回の場合は虫眼鏡アイコン)が表示されるようになりました。

投稿2020/11/29 09:57

doichek

総合スコア27