HAML %button을 붙이고 submit 버튼에 폰트 오삼 아이콘을 붙인다

submit 버튼(송신용 버튼)에 폰트 오삼의 아이콘을 붙이고 싶다.
그러나 다음과 같이 해 버리면, 잘 가지 않습니다.

_main_bar.html.haml

.form
    = form_for [@group, @message] do |f|
      .form__new-message
        .form__new-message__input-box
          = f.text_field :content, class: 'text', placeholder: 'メッセージを入力'
          = f.label :image, class: 'image' do
            = icon('fas', 'image', class: 'icon')
            = f.file_field :image, class: 'hidden'
        = f.submit '送信', class: 'submit-btn'         #今回見るのはここの行
        = icon('fas', 'paper-plane', class: 'plane')   #今回見るのはここの行

main_bar.scss

      .submit-btn {
        align-items: center;
        height: 50px;
        width: 100px;
        margin-left: 15px;
        padding: 0 20px 0;
        background-color: #38aef0;
        color: white;
        box-shadow: 1px 1px 2px #999999;
        border-style: none;
      }
      .fas.fa-paper-plane {
        color: white;
        font-size: 25px;
      }

이렇게 됩니다. ↓
종이 비행기가 전송 버튼에서 튀어 나왔습니다.



그래서 이렇게 변경하여 종이 비행기를 보내기 버튼 안에 넣습니다.

_main_bar.html.haml

  .form
    = form_for [@group, @message] do |f|
      .form__new-message
        .form__new-message__input-box
          = f.text_field :content, class: 'text', placeholder: 'メッセージを入力'
          = f.label :image, class: 'image' do
            = icon('fas', 'image', class: 'icon')
            = f.file_field :image, class: 'hidden'
        %button{type: "submit", class:'btn'}   #今回見るのはここの行
          %i.fas.fa-paper-plane　　　　　　　　　 #今回見るのはここの行
          .letter　　　　　　　　　　　　　　　　　 #今回見るのはここの行
            送信　　　　　　　　　　　　　　　　　　 #今回見るのはここの行

main_bar.scss

      .btn {
        align-items: center;
        height: 50px;
        width: 100px;
        margin-left: 15px;
        padding: 0 20px 0;
        background-color: #38aef0;
        color: white;
        box-shadow: 1px 1px 2px #999999;
        border-style: none;
        display: flex;
      }
      .fas.fa-paper-plane {
        color: white;
        font-size: 17px;
      }
      .letter {
        font-size: 16px;
        margin-left: 5px;
      }

무사히 성공(＾∀＾)



할 수 있어요! !

↓↓변경한 부분↓↓

_main.html.haml

= f.submit '送信', class: 'submit-btn'
= icon('fas', 'paper-plane', class: 'plane')

부분을

_main.html.haml

%button{type: "submit", class:'btn'} 
  %i.fas.fa-paper-plane　　　　　　　　　 
  .letter　　　　　　　　　　　　　　　　　 
    送信　　　　　　　　　　　　　　　　　　 

↑↑변경한 부분↑↑

같이 쓰는 법을 바꿨습니다! !

type 속성에서
submit(제출 버튼)
reset(리셋 버튼)
button(범용적으로 사용할 수 있는 푸시 버튼)
사용할 수 있습니다! !
%button{type: "submit", class:'btn'} 여기의 type: "" 의 내용의 부분입니다