개요

표제 대로입니다만, 조사하면 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: '&#xf0a8',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로,
아이콘을 왼쪽 정렬하고 보내기 버튼을 오른쪽 정렬합니다.

지적 등 있으시면 꼭 부탁드립니다.