HAML %buttonをつけてsubmitボタンにフォントオーサムのアイコンをつける

10912 ワード
HTML haml HTML テキストリンク

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: ""の中身の部分の事です