【Rails6】formヘルパー内で、submitボタンにCSSをつけたい場合・button_tag要素を使ってtypeにsubmitを指定する場合

やりたいこと

• font awesomeを利用して以下の表示４のようになボタンを設置したい。
  

困ったこと

• どうもうまく反映されない。以下それぞれすべてやってみたが、どれも正常にCSSが反映されなかったり、ちゃんと送信がされなかったり。
  • <% f.submit>
  • <%=button_tag>
  • <button type>

<%= f.submit "表示0", class: 'back-btn-update' %>
<%# 送信はできる。font awesomeは使用せず自作CSS。 %>

<%= button_tag :type => "submit", :class =>"btn btn--red btn--radius btn--cubic" do %>
  <i class="fas fa-angle-right fa-position-right"></i>表示1
<% end %>
<%# 送信はできるが、font awesomeの表示が反映されない。 %>

<%= button_tag '<i class="fas fa-angle-right fa-position-right"></i>表示2'.html_safe, :type => "submit", 
    :class =>"btn btn--red btn--radius btn--cubic" %>
    <%# 送信はできるが、font awesomeの表示が反映されない。 %>

<% f.submit class: "btn btn--red btn--radius btn--cubic" %>表示3<i class="fas fa-angle-right fa-position-right"></i>
    <%# クリックできない。 %>

<a type="submit" class="btn btn--red btn--radius btn--cubic">表示4<i class="fas fa-angle-right fa-position-right"></i></a>
    <%# 正常に表示されているが、送信処理がされない。 %>

<button type="submit" class="btn btn--red btn--radius btn--cubic">表示5<i class="fas fa-angle-right fa-position-right"></i></button>
    <%# 送信はできるが、font awesomeの表示が反映されない。 %>

解決方法

• <button>で直接記述した場合でさえCSSが適用されていないので、CSSに原因があるのでは？

  • どこかにfontawesomeで適用したいCSSより優っているものがあるのではと思ったが、とくにそれらしいものは見つからず。
  • しかし、反映させたいCSSに!important;をつけたら綺麗に表示されたので、これで解決とした

• teratailでも質問しました

  • form_withのsubmitにfont awesomeのCSSが反映されない

formヘルパー内で、submitボタンにCSSをつけたい場合

• 以下のようにすれば適用できる

<% f.submit "表示0", class: 'btn' %>

• :valueを入れたくない場合は以下のようにすればよい

<% f.submit :class=>"btn" %>
<% f.submit nil, class: 'btn' %>

formヘルパー内で、button_tag要素を使ってtypeにsubmitを指定する場合

• どういう時にこのパターンがあったかというと、formヘルパーを使った「送信する！」というsubmitボタンの中にFontAwesomeのアイコンを設置したかった時。button_tag要素を使ってtypeにsubmitを指定し、ブロックでFontAwesomeのコードを書いたら適用できた。

<%= form_with model: @review, url: item_reviews_path(@item.id), local: true do |f|%> 
 <%= f.text_area :comment, class: "m-form-text", placeholder: "ご自由に記載ください", id:"comment_content" %>
 <%= button_tag :type => "submit", :class =>"btn btn--red btn--radius btn--cubic" do %>
  <i class="fas fa-angle-right fa-position-right"></i>送信する!
 <% end %>
<% end %>

• しかし、button_tagは公式Docはあるものの、ほとんど記事がない...

form内のbutton要素について

• button 要素はデフォルトで type='submit' が割り当てられる
• 上記の理由により、以下二つは同じ意味になる

<button>ボタン</button>
<button type='submit'>submit ボタン</button>