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

form_withでf.submitを利用しているのですが、font awesomeを利用したCSSが反映されません。
以下でいう「表示４」を送信フォームとして実装したいのですが、正しいコードがわからなくて困っています。
ご教示いただけますと幸いです。

◆やってみたこと
・button_tagを利用してみた（表示１と２です）
・button type="submit"を利用してみた（表示５です）

html
1<%= f.submit "表示0", class: 'back-btn-update' %>
2<%# 送信はできる。font awesomeは使用せず自作CSS。 %>
3
4<%= button_tag :type => "submit", :class =>"btn btn--red btn--radius btn--cubic" do %>
5  <i class="fas fa-angle-right fa-position-right"></i>表示1
6<% end %>
7<%# 送信はできるが、font awesomeの表示が反映されない。 %>
8
9<%= button_tag '<i class="fas fa-angle-right fa-position-right"></i>表示2'.html_safe, :type => "submit", 
10    :class =>"btn btn--red btn--radius btn--cubic" %>
11    <%# 送信はできるが、font awesomeの表示が反映されない。 %>
12
13<% f.submit class: "btn btn--red btn--radius btn--cubic" %>表示3<i class="fas fa-angle-right fa-position-right"></i>
14    <%# クリックできない。 %>
15
16<a type="submit" class="btn btn--red btn--radius btn--cubic">表示4<i class="fas fa-angle-right fa-position-right"></i></a>
17    <%# 正常に表示されているが、送信処理がされない。 %>
18
19<button type="submit" class="btn btn--red btn--radius btn--cubic">表示5<i class="fas fa-angle-right fa-position-right"></i></button>
20    <%# 送信はできるが、font awesomeの表示が反映されない。 %>

css
1.btn--red,
2a.btn--red {
3  color: #fff;
4  background-color: #eb6100;
5}
6
7.btn--red:hover,
8a.btn--red:hover {
9  color: #fff;
10  background: #ff9c07;
11}
12
13a.btn--red.btn--cubic {
14  border-bottom: 5px solid #9f000c;
15}
16
17a.btn--red.btn--cubic:hover {
18  margin-top: 3px;
19  border-bottom: 2px solid #9f000c;
20}
21
22.fa-position-right {
23  position: absolute;
24  top: calc(50% - .5em);
25  right: 1rem;
26} 
27
28a.btn--radius {
29   border-radius: 100vh;
30}
31

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

回答1件

button_tagを使用して生成したボタンだけでなく、
<button>で直接記述した場合にもCSSが適用されていないということは、
RailsではなくCSSに原因があるように思います。

試しに以下のようにした場合、文字色が白になりませんでしょうか？

css
1.btn--red,
2a.btn--red {
3  color: #fff !important;    ・・・試しに!importantをつけてみる
4  background-color: #eb6100;
5}

もしこれで白くなるようでしたら、
表示１や表示２のようになってしまうCSSが、どこかに存在している可能性があります。
そのCSSが、反映させたいCSSよりも勝ってしまっているんだと思います。
よって、
・表示１や表示２のようになってしまうCSSが不要であれば消す
・反映させたいCSSの詳細度を、表示１や表示２のCSSより上げる
（詳細度についてわかりやすそうな記事）
などの方法で解決できるのではないでしょうか。

余談ですが