##概要
表題の通りですが、調べるとHaml記法で書かれた投稿しか見つけられず、今のところHaml記法を使っていない私にはわかりづらかったので、メモがてら共有させていただきます。
##環境
Ruby:2.6.3
Rails:5.1.6
bootstrap:4.4.1
FontAwesome
##方法
1.file_fieldで画像投稿ボタンを表示。
2.file_fieldボタンによって出力されるinputタグを見えなくする(dislay:none)。
3.file_fieldの上にFont Awesomeのアイコンをiタグで表示。
4.iタグをlabelタグで囲って、アイコンをボタンとして有効にする。
home.html.erb
<%= form_for(@dreampost) do |f| %>
<div class="field">
<%= f.text_area :content, placeholder: "投稿できます" %>
</div>
<div class="space-between">
<span class="picture">
<label for="dreampost_picture">
<i class="far fa-image"></i>
</label>
<%= f.file_field :picture, placeholder: '',accept: 'image/jpeg,image/gif,image/png' %>
<div class="clear"></div>
</span>
<%= f.submit "送信", class: "btn btn-primary" %>
<% end %>
custom.scss
.space-between { display: flex; justify-content: space-between; }
.picture>input { display: none; }
.picture>label { margin-bottom: 0; float: left; }
.fa-image { color: #fff; float: left; }
.fa-image::before { font-size: 2rem; }
.clear { clear: both; }
#補足
div.space-betweenに{ display: flex; justify-content: space-between;}と、
labelタグとiタグにfloat:leftで、
アイコンを左寄せ、送信ボタンを右寄せにしています。
ご指摘などございましたら、ぜひよろしくお願いいたします。