Fontawesomeアイコンを表示したい

前提

本のタイトルと感想を投稿できるアプリケーションを作成中です
CSSのフォルダはいじらずにすべてHTMLで処理（カリキュラムの課題要件のため）

実現したいこと

Fontawesomeを使ってアイコンを表示させたい
アイコンもリンクに含ませたい

発生している問題

アイコンが表示されているものもあればなぜか表示されていないものもある
アイコンとテキストを色も白で統一したいが、Homeのアイコンのみ白になっている。
Log out、About、Login、Signupに至ってはテキストは出ているものの、アイコンの表示すらされていません（本当になぜ...？）
Homeアイコン以外は黒、テキストも青いままなので白に変えたいです

該当のソースコード

ruby
1<!DOCTYPE html>
2<html>
3    <head>
4      <title>Bookers2Ver2</title>
5      <%= csrf_meta_tags %>
6      <%= csp_meta_tag %>
7      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8      <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9      <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10    </head>
11    <body>
12     <header>
13        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
14          <div class="container">
15            <a class="navbar-brand" href="https://bookers-level2.herokuapp.com">
16              <span>Bookers</span>
17            </a>
18            <!-- ハンバーガーアイコン -->
19            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" 
20                    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
21              <span class="navbar-toggler-icon"></span>
22            </button>
23            
24            <div class="collapse navbar-collapse" id="navbarNavDropdown">
25              <ul class="navbar-nav ml-auto fa-ul">
26                <% if user_signed_in? %>
27                  <li>
28                    <i class="fas fa-home"></i>
29                    <%= link_to 'Home', user_path(current_user.id) %>
30                  </li>
31                  <li>
32                    <i class="fas fa-users"></i>
33                    <%= link_to 'Users', users_path %>
34                  </li>
35                  <li>
36                    <i class="fas fa-book-open"></i>
37                    <%= link_to 'Books', books_path %>
38                  </li>
39                  <li>
40                    <i class="fas fa-sign-out-alt"></i>
41                    <%= link_to "Log out", destroy_user_session_path %>
42                  </li>
43                <% else %>
44                  <li>
45                    <i class="fas fa-home"></i>
46                    <%= link_to "Home", root_path %>
47                  </li>
48                  <li>
49                    <i class="fas fa-link"></i>
50                    <%= link_to 'About', home_about_path %>
51                  </li>
52                  <li>
53                    <i class="fas fa-user-plus"></i>
54                    <%= link_to "Sign up", new_user_registration_path %>
55                  </li>
56                  <li>
57                    <i class="fas fa-sign-in-alt"></i>
58                    <%= link_to "Log in", new_user_session_path %>
59                  </li>
60                <% end %>
61              </ul>
62            </div>
63          </div>
64        </nav>
65     </header>
66     <main class="mb-auto">
67      <%= flash[:notice] %>
68      <%= yield %>
69     </main>
70     
71    <footer>
72      <p id="notice"></p>
73      <div class="container mt-5">
74        <div class="row">
75          <div class="mx-auto">
76            <p>CopyRight Infratop.inc</p>
77          </div>
78        </div>
79      </div>
80    </footer>
81  </body>
82</html>
83

試したこと

いろいろ調べてSpanタグで囲ってみたり、以下のように記述もしてみたのですがだめでした。

ruby
1<i class="fas fa-home" style="color:white;"></i>

補足情報（FW/ツールのバージョンなど）

Fontawesomeは5.15.4を使用
（ただ、Bookのアイコンが本を開いているものなのに表示されているのは閉じているものであったりしているので設定がうまくいってない可能性もあるかもしれません）

念のため、js,scssも記載
（カリキュラム通りに行っているのでおそらく問題ないとは思うのですが...）

application.scss
1@import '~bootstrap/scss/bootstrap';
2@import '~@fortawesome/fontawesome-free/scss/fontawesome';

application.js
1import Rails from "@rails/ujs"
2import Turbolinks from "turbolinks"
3import * as ActiveStorage from "@rails/activestorage"
4import "channels"
5
6import "jquery";
7import "popper.js";
8import "bootstrap";
9import "../stylesheets/application"
10import '@fortawesome/fontawesome-free/js/all'
11
12Rails.start()
13Turbolinks.start()
14ActiveStorage.start()

以下見本と問題箇所。ログイン前の画面。

以下追記1

cloud9
1=> Booting Puma
2=> Rails 6.1.6.1 application starting in development 
3=> Run `bin/rails server --help` for more startup options
4Puma starting in single mode...
5* Puma version: 5.6.4 (ruby 3.1.2-p20) ("Birdie's Version")
6*  Min threads: 5
7*  Max threads: 5
8*  Environment: development
9*          PID: 7626
10* Listening on http://127.0.0.1:8080
11* Listening on http://[::1]:8080
12Use Ctrl-C to stop
13Started GET "/" for 106.150.140.40 at 2022-08-26 00:29:02 +0000
14Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1
15   (1.4ms)  SELECT sqlite_version(*)
16   (0.8ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
17Processing by HomesController#top as HTML
18  Rendering layout layouts/application.html.erb
19  Rendering homes/top.html.erb within layouts/application
20  Rendered homes/top.html.erb within layouts/application (Duration: 4.6ms | Allocations: 621)
21[Webpacker] Everything's up-to-date. Nothing to do
22  Rendered layout layouts/application.html.erb (Duration: 22.9ms | Allocations: 3551)
23Completed 200 OK in 48ms (Views: 30.6ms | ActiveRecord: 0.0ms | Allocations: 7521)
24
25
26Started GET "/" for 106.150.140.40 at 2022-08-26 00:29:05 +0000
27Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1
28Processing by HomesController#top as HTML
29  Rendering layout layouts/application.html.erb
30  Rendering homes/top.html.erb within layouts/application
31  Rendered homes/top.html.erb within layouts/application (Duration: 0.7ms | Allocations: 341)
32[Webpacker] Everything's up-to-date. Nothing to do
33  Rendered layout layouts/application.html.erb (Duration: 6.8ms | Allocations: 2853)
34Completed 200 OK in 11ms (Views: 10.1ms | ActiveRecord: 0.0ms | Allocations: 4298)
35
36
37Started GET "/home/about" for 106.150.140.40 at 2022-08-26 00:29:46 +0000
38Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1
39Processing by HomesController#about as HTML
40  Rendering layout layouts/application.html.erb
41  Rendering homes/about.html.erb within layouts/application
42  Rendered homes/about.html.erb within layouts/application (Duration: 0.9ms | Allocations: 129)
43[Webpacker] Everything's up-to-date. Nothing to do
44  Rendered layout layouts/application.html.erb (Duration: 6.3ms | Allocations: 2120)
45Completed 200 OK in 13ms (Views: 12.7ms | ActiveRecord: 0.0ms | Allocations: 2777)
46
47
48Started GET "/users/sign_up" for 106.150.140.40 at 2022-08-26 00:30:30 +0000
49Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1
50Processing by Devise::RegistrationsController#new as HTML
51  Rendering layout layouts/application.html.erb
52  Rendering devise/registrations/new.html.erb within layouts/application
53  Rendered devise/shared/_error_messages.html.erb (Duration: 1.1ms | Allocations: 275)
54  Rendered devise/shared/_links.html.erb (Duration: 1.7ms | Allocations: 610)
55  Rendered devise/registrations/new.html.erb within layouts/application (Duration: 22.3ms | Allocations: 5658)
56[Webpacker] Everything's up-to-date. Nothing to do
57  Rendered layout layouts/application.html.erb (Duration: 27.4ms | Allocations: 7672)
58Completed 200 OK in 42ms (Views: 31.3ms | ActiveRecord: 0.6ms | Allocations: 15518)
59
60
61^C- Gracefully stopping, waiting for requests to finish
62=== puma shutdown: 2022-08-26 00:30:47 +0000 ===
63- Goodbye!
64Exiting

追記2（コンソール上のエラー）

コAutofocus processing was blocked because a document already has a focused element.
DevTools failed to load source map: Could not load content for https://41bba7c5241c4e8a8ab9eab04d92f21a.vfs.cloud9.ap-northeast-1.amazonaws.com/packs/js/application-de10aaf691dd43e39fc5.js.map: HTTP error: status code 503, net::ERR_HTTP_RESPONSE_CODE_FAILURE

かれこれ5時間以上は試行錯誤して詰まっているので切実に困っています...ご協力お願いいたします。

m.ts10806

2022/08/25 22:04

見本もRailsなのでしょうか。いずれにしてもRuby on Railsの質問タグも必要に思います。

pi-nattu

2022/08/25 23:45

失礼しました。早速修正いたしました。見本もRubyになります。

maisumakun

2022/08/26 00:24

ブラウザのコンソールにエラーは出ていませんか？

pi-nattu

2022/08/26 00:45

追記2にて記載しました。要素が重複している？感じですかね...？

pi-nattu

2022/08/27 14:47

自己解決できました。お二方ともアドバイス・質問していただきありがとうございました！

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

回答1件

自己解決

ただ、Bookのアイコンが本を開いているものなのに表示されているのは閉じているものであったりしているので設定がうまくいってない可能性もあるかもしれません

Fontawesomeの貼り付けるコードがそもそも別のものだった（注意不足でした...）

アイコンもリンクに含ませたい

今回の場合は
<%%>の中にURLのパス、クラスで文字を白で設定、doでアイコンのコードの後に表示させたい文字を囲んでいく。
というようなもので良かったようです。
スクールのメンターに聞いて解決となりました。...勉強・復習になりました。

ruby
1<li>
2      <%= link_to user_path(current_user.id), class: 'nav-link text-light'  do %>
3      　<i class="fas fa-home"></i>Home
4     <% end %>
5</li>

ruby
1<!DOCTYPE html>
2<html class="fontawesome-i2svg-active fontawesome-i2svg-complete">
3  <head>
4      <title>Bookers2Ver2</title>
5      <%= csrf_meta_tags %>
6      <%= csp_meta_tag %>
7      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8      <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9      <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10      <script src="https://kit.fontawesome.com/214a38c0d4.js" crossorigin="anonymous"></script>
11  </head>
12
13  <body>
14     <header>
15        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
16          <div class="container">
17            <a class="navbar-brand" href="https://bookers-level2.herokuapp.com">
18              <span>Bookers</span>
19            </a>
20            <!-- ハンバーガーアイコン -->
21            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" 
22                    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
23              <span class="navbar-toggler-icon"></span>
24            </button>
25            
26            <div class="collapse navbar-collapse" id="navbarNavDropdown">
27              <ul class="navbar-nav ml-auto">
28                <% if user_signed_in? %>
29                  <li>
30                    <%= link_to user_path(current_user.id), class: 'nav-link text-light'  do %>
31                      <i class="fas fa-home"></i>Home
32                    <% end %>
33                  </li>
34                  <li>
35                    <%= link_to users_path, class: 'nav-link text-light' do %>
36                      <i class="fas fa-users"></i>Users
37                    <% end %>
38                  </li>
39                  <li>
40                    <%= link_to books_path, class: 'nav-link text-light' do %>
41                     <i class="fas fa-book-open"></i></i>Books
42                    <% end %>
43                  </li>
44                  <li>
45                    <%= link_to destroy_user_session_path, class: 'nav-link text-light' do %>
46                      <i class="fas fa-sign-out-alt"></i>Log out
47                    <% end %>
48                  </li>
49                <% else %>
50                  <li>
51                    <%= link_to root_path, class: 'nav-link text-light' do %>
52                      <i class="fas fa-home"></i>Home
53                    <% end %>
54                  </li>
55                  <li>
56                    <%= link_to home_about_path, class: 'nav-link text-light' do %>
57                      <i class="fas fa-link"></i>About
58                    <% end %>
59                  </li>
60                  <li>
61                    <%= link_to new_user_registration_path, class: 'nav-link text-light' do %>
62                      <i class="fas fa-user-plus"></i>Sign up
63                    <% end %>
64                  </li>
65                  <li>
66                    <%= link_to new_user_session_path, class: 'nav-link text-light' do %>
67                      <i class="fas fa-sign-in-alt"></i>Log in
68                    <% end %>
69                  </li>
70                <% end %>
71              </ul>
72            </div>
73          </div>
74        </nav>
75     </header>
76     <main class="mb-auto">
77      <%= flash[:notice] %>
78      <%= yield %>
79     </main>
80     
81    <footer>
82      <p id="notice"></p>
83      <div class="container mt-5">
84        <div class="row">
85          <div class="mx-auto">
86            <p>CopyRight Infratop.inc</p>
87          </div>
88        </div>
89      </div>
90    </footer>
91    
92    <!-- Optional JavaScript -->
93    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
94    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
95            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
96            crossorigin="anonymous">
97    </script>
98    
99    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
100            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
101            crossorigin="anonymous">
102    </script>
103    
104    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 
105            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 
106            crossorigin="anonymous">
107    </script>
108  </body>
109</html>
110