Font Awesomeのアイコンがうまく表示されない
解決したいこと
制作中のサイトにFont Awesomeのアイコンを使いたいのですがうまく表示されません。
解決方法を教えていただきたいです。
【サイトの詳細】
・好きな本について自由に意見を投稿できるサイト
・自分の投稿を編集・削除できる機能がついている
該当するソースコード
<table class='table table-hover table-inverse'>
<tbody>
<tr>
<td><%= link_to user_path(@user.id) do %>
<%= image_tag 'default-image.jpg' %>
<% end %>
<%= link_to @book.user.name, user_path(@user.id) %>
</td>
<td><%= link_to @book.title, book_path%></td>
<td><%= @book.body %></td>
<% if @book.user_id == current_user.id %>
<td><%= link_to edit_book_path(@book.id), class: "btn btn btn-secondary text-white", method: :get do %>
<i class="fa-solid fa-pen-to-square"></i>
<% end %></td>
<td><%= link_to book_path(@book.id), class: "btn btn-danger", data: { confirm: '本当に削除しますか?' }, method: :delete do %>
<i class="fa-solid fa-trash"></i>
<% end %></td>
<% end %>
</tr>
</tbody>
</table>
自分で試したこと
・アイコンのコードを別サイトではなく公式サイトからコピーする
※ヘッダーにもアイコンを使用していますがそちらではうまく表示されています。
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">
<span>Anibook</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<% if user_signed_in? %>
<li>
<a class="nav-link text-light" href="/users/<%= current_user.id %>">
<i class="fas fa-home"></i>Home
</a>
</li>
<li>
<a class="nav-link text-light" href="/users">
<i class="fas fa-users"></i>Users
</a>
</li>
<li>
<a class="nav-link text-light" href="/books">
<i class="fas fa-book-open"></i>Posts
</a>
</li>
<li>
<a class="nav-link text-light" rel="nofollow" data-method="delete" href="/users/sign_out">
<i class="fas fa-sign-out-alt"></i>Log out
</a>
</li>
<% else %>
<li>
<a class="nav-link text-light" href="/">
<i class="fas fa-home"></i>Home
</a>
</li>
<li>
<a class="nav-link text-light" href="/home/about">
<i class="fas fa-link"></i>About
</a>
</li>
<li>
<a class="nav-link text-light" href="/users/sign_up">
<i class="fas fa-user-plus"></i>Sign up
</a>
</li>
<li>
<a class="nav-link text-light" href="/users/sign_in">
<i class="fas fa-sign-in-alt"></i>Log in
</a>
</li>
<% end %>
</ul>
</div>
</div>
</nav>
</header>
よろしくお願いいたします。
0 likes
