チャットアプリの画像投稿の仕方

Question

簡易チャットアプリを作成しているのですが、画像の投稿でつまづいてしまいました。

現在の記述はこのようになっています。

= f.label :image, class: 'input-box__image' do
  %i.fa.fa-image
  = f.file_field :image, class: '.fa.fa-image'

このように記述したら画像投稿は出来ます。
3行目の

= f.file_field :image, class: '.fa.fa-image'

があることによって新たに画像フォームが作成されます。
しかしこの記述がないと画像投稿出来ません。
今回やりたい内容は
2行目に記載されている「fontawesome」のアイコンを用いて画像投稿がしたいです。
つまり、この3行目を用いることで新たにフォームが作成され、「fontawesome」と２つフォームが出来ます。
２つフォームが出来ても２箇所から画像投稿は出来ますが、見た目的におかしくなります。

文章が分かりにくいかもしれませんが、やりたい内容としては、
「fontawesome」のアイコンを用いて画像投稿がしたいです。
よろしくお願いします。

Answer 1

こんな感じでどうでしょうか。

//①ここら辺にposition: relative;をつけてあげてください
.input-box {
    position: relative;
    width: 100%;
}

//②fontawesomeをposition: absolute;を使って位置を調整します。
//①のposition: relative;がないとうまくレイアウトできません。
.input-box__image {
    font-size: 1.3rem;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}


//③formタグのパーツである元のボタンを消します。
.input-box__image__file {
    display: none;
}