Q&A
layoutsなどでの、JavaScriptやCSSの読み込み部分はどのようになっていますか？
実現したいこと
Rails7系でfont-awesomeを使用できるようにしたい
前提
ここに質問の内容を詳しく書いてください。
Rails7系でfont-awesomeを使用するために、コードを書いているが、正常に認識されない。
PFのアプリでストレス解消法を投稿できるものを作っています
今、起きている問題：PFのストレス解消法の一覧画面で、他人の投稿にブックマークボタンを表示、自分の投稿に編集、削除ボタンを表示させたいが、表示されない。
考えられる原因：投稿画面で、ブックマークボタン、編集、削除ボタン以外のユーザー名や投稿日時を表示させる部分でも、<%= icon 'far' %>などのコードを使用しており、同様にアイコンのみが表示されないことから、bootstrapやfont-awesomeなどが上手く機能していないことが考えられた
発生している問題・エラーメッセージ
エラーメッセージは特になし
該当のソースコード
app/assets/javascripts/application.js
//= require jquery3 //= require popper //= require bootstrap-sprockets //= require rails-ujs //= require activestorage //= require_tree .
app/assets/stylesheets/application.bootstrap.scss
@import 'bootstrap/scss/bootstrap'; @import 'bootstrap-icons/font/bootstrap-icons';
app/assets/stylesheets/application.scss
@import "top"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "@fortawesome/fontawesome-free/scss/fontawesome"; @import "@fortawesome/fontawesome-free/scss/regular"; // regular icons @import "@fortawesome/fontawesome-free/scss/solid"; // solid icons @import "@fortawesome/fontawesome-free/scss/brands"; // brand icons
app/views/means/_crud_menus.html.erb
<ul class='crud-menu-btn list-inline float-right'> <li class="list-inline-item"> <%= link_to edit_mean_path(mean), id: "button-edit-#{mean.id}" do %> <i class="fa-regular fa-pen"></i> <% end %> </li> <li class="list-inline-item"> <%= link_to mean_path(mean), id: "button-delete-#{mean.id}", method: :delete, data: { confirm: "Are you sure delete mean?" } do %> <i class="fa-regular fa-trash"></i> <% end %> </li> </ul>
app/views/means/_bookmark.html.erb
<%= link_to bookmarks_path(mean_id: mean.id), id: "js-bookmark-button-for-mean-#{mean.id}", class:"float-right", method: :post do %> <i class="fa-light fa-star"></i> <% end %>
app/views/means/_unbookmark.html.erb
<%= link_to bookmark_path(current_user.bookmarks.find_by(mean_id: mean.id)), id: "js-bookmark-button-for-mean-#{mean.id}", class:"float-right", method: :delete do %> <i class="fa-solid fa-star"></i> <% end %>
app/views/means/_bookmark_button.html.erb
<% if current_user.bookmark?(mean) %> <%= render 'unbookmark', { mean: mean } %> <% else %> <%= render 'bookmark', { mean: mean } %> <% end %>
app/views/means/_mean.html.erb
<div class="col-sm-12 col-lg-4 mb-3"> <div id="mean-id-<%= mean.id %>"> <div class="card"> <div class="card-body"> <h4 class="card-title"> <%= link_to mean.title, mean_path(mean) %> </h4> <% if current_user.mine?(mean) %> <%= render 'crud_menus', mean: mean %> <% else %> <%= render 'bookmark_button', mean: mean %> <% end %> <ul class="list-inline"> <li class="list-inline-item"> <i class="fa-regular fa-user"></i> <%= mean.user.name %> </li> <li class="list-inline-item"> <i class="fa-light fa-calendar-days"></i> <%= l mean.created_at, format: :long %> </li> </ul> <p class="card-text"><%= mean.approach %></p> </div> </div> </div> </div>
試したこと
参考文献
https://qiita.com/koki_73/items/fa6d31a3b54a84d19dcf
bootstrapや、font-awesomeが正しくinstallされていないのではないかと考えて、上記の参考文献を元に、コードを見直してみたが、原因はよくわからなかった
以下が自分のコードになります
app/assets/javascripts/application.js
//= require jquery3 //= require popper //= require bootstrap-sprockets //= require rails-ujs //= require activestorage //= require_tree .
app/assets/stylesheets/application.scss
@import "top"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome";
app/views/means/_mean.html.erb
<div class="col-sm-12 col-lg-4 mb-3"> <div id="mean-id-<%= mean.id %>"> <div class="card"> <div class="card-body"> <h4 class="card-title"> <%= link_to mean.title, mean_path(mean) %> </h4> <% if current_user.mine?(mean) %> <%= render 'crud_menus', mean: mean %> <% else %> <%= render 'bookmark_button', mean: mean %> <% end %> <ul class="list-inline"> <li class="list-inline-item"> <%= icon 'far', 'user' %> <%= mean.user.name %> </li> <li class="list-inline-item"> <%= icon 'far', 'calendar' %> <%= l mean.created_at, format: :long %> </li> </ul> <p class="card-text"><%= mean.approach %></p> </div> </div> </div> </div>
app/views/means/_crud_menus.html.erb
<ul class='crud-menu-btn list-inline float-right'> <li class="list-inline-item"> <%= link_to edit_mean_path(mean), id: "button-edit-#{mean.id}" do %> <%= icon 'fa', 'pen' %> <% end %> </li> <li class="list-inline-item"> <%= link_to mean_path(mean), id: "button-delete-#{mean.id}", method: :delete, data: { confirm: "Are you sure delete mean?" } do %> <%= icon 'fas', 'trash' %> <% end %> </li> </ul>
app/views/means/_bookmark.html.erb
<%= link_to bookmarks_path(mean_id: mean.id), id: "js-bookmark-button-for-mean-#{mean.id}", class:"float-right", method: :post do %> <%= icon 'far', 'star' %> <% end %>
参考文献
https://qiita.com/fumi238000/items/99dd5643f40457c25e21
次に、コードの書き方に原因があると考え、上記の記事を参考に、<%= icon 'far', 'star' %>の書き方から、<i class ~>の形でコードを書き直したが上手くいかなかった
以下が自分の書いたコードです
app/views/means/_crud_menus.html.erb
<ul class='crud-menu-btn list-inline float-right'> <li class="list-inline-item"> <%= link_to edit_mean_path(mean), id: "button-edit-#{mean.id}" do %> <i class="fa-regular fa-pen"></i> <% end %> </li> <li class="list-inline-item"> <%= link_to mean_path(mean), id: "button-delete-#{mean.id}", method: :delete, data: { confirm: "Are you sure delete mean?" } do %> <i class="fa-regular fa-trash"></i> <% end %> </li> </ul>
app/assets/stylesheets/application.scss
@import "top"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "@fortawesome/fontawesome-free/scss/fontawesome";
app/javascript/packs/application.js
require("@fortawesome/fontawesome-free/js/all")
次に、使用しているブラウザの問題かと思ったが、別のアプリを起動してみたところ、font-awesomeは正常に表示されていたので、ブラウザの問題ではないと考えた
次に、chatGPTに質問をしたところ、font-awesome-sass gemはrails7では、動かない可能性があるので、@fortawesome/fontawesome-freeパッケージを使用することにしました
以下のコマンドで@fortawesome/fontawesome-freeパッケージをインストールしました
yarn add @fortawesome/fontawesome-free
次にapp/assets/stylesheets/application.scssを以下のように編集しました
@import "top"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "@fortawesome/fontawesome-free/scss/fontawesome"; @import "@fortawesome/fontawesome-free/scss/regular"; // regular icons @import "@fortawesome/fontawesome-free/scss/solid"; // solid icons @import "@fortawesome/fontawesome-free/scss/brands"; // brand icons
しかし、上手くいかなかった
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
お疲れ様です。
自分のコードは以下のようになります
app/views/layouts/application.html.erb
```
<html>
<head>
<title>Stressdiary</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body>
<%= render 'shared/header' %>
<div class="py-3">
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
</html>
```
宜しくお願いします
あなたの回答
tips
プレビュー
