Simple Form behaving different than form_for - ruby-on-rails

Question

Simple_form
<%= simple_form_for(#book, wrapper: :horizontal_form, wrapper_mappings: {
}, html: { class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="image-upload">
<%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
</div>
<%= f.input :category_id, collection: #categories, prompt: 'Select a category' %>
<%= f.input :author %>
<%= f.input :description %>
<div class="d-flex">
<div class="ml-auto">
<%= f.button :submit %>
<%= f.button :cancel, to: books_path %>
</div>
</div>
<% end %>
This is my simple_form form. I want the f.input :book_cover to be displayed as the icon fa fa-cloud-download without the normal download button.
CSS.
.image-upload > input {
display: none;
}
Ive got another form working with it (this is just a snippet of a regular form_for resource:
<%= f.form_group :avatar, class: "row" do |f| %>
<%= f.label :avatar, class: "col-sm-4 col-form-label" %>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<% if #user.avatar.present? %> <%= #user.avatar_file_name %>
<% end %>
<%= f.file_field :avatar %>
<%= f.error_messages %>
</label>
</div>
<% end %>
Can't seem to get my simple_form working with just the icon.
Edit: Uploading a image to show what my problem is and what it should look like
picture
should look like this

Answer 1

SimpleForm has a input_field method that you can use instead input to render only the actual input element, without wrapper div and label. That helps if you want to build more complex structures manually.
<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<%= f.input_field :book_cover %>
<%= f.error_messages %>
</label>
</div>