Fontawesome 提交按钮上有 simple_form_for

Question

我的目标是使用 simple_form_for

在提交按钮内添加一个 Fontawesome 图标

Final goal

现在的表格是这样的：

            <%= simple_form_for @model, html: {class: "d-flex align-items-end"} do |f| %>
            <%= f.input :model, :as => :hidden, :input_html => { :value => model.id } %>
            <%= f.input :x, label: false, :input_html => { :value => model.x_attr } %>
            <%= f.button :submit, "x", class: "btn btn-secondary" %>
            <% end %>

表格是：

Current form

是否可以添加一个 <i class="fas fa-cart-arrow-down"></i> 在那个按钮里面 simple_form?

Answer 1

我能找到的唯一方法是在纯 HTML

上创建提交按钮

            <%= simple_form_for @model, html: {class: "d-flex align-items-end"} do |f| %>
            <%= f.input :model :as => :hidden, :input_html => { :value => model.id } %>
            <%= f.input :quantity, label: false, :input_html => { :value => model.x},  wrap_with: { tag: :span} %>

            <label>m</label>
            <button type="submit" class="btn btn-success btn-card-index-cart" title="Adicionar ao Carrinho">
                <i class="fas fa-cart-arrow-down"></i>
            </button>

            <% end %>

它按预期工作:)

Answer 2

您可以将一个块传递到按钮中：

<%= f.button :submit, class: "btn btn-secondary" do %>
  <i class="fas fa-cart-arrow-down"></i>
<% end %>

这允许您在按钮中放置任何 HTML。

所以完整的表格如下：

<%= simple_form_for @model, html: {class: "d-flex align-items-end"} do |f| %>
            <%= f.input :model, :as => :hidden, :input_html => { :value => model.id } %>
            <%= f.input :x, label: false, :input_html => { :value => model.x_attr } %>
            <%= f.button :submit, class: "btn btn-secondary" do %>
                          <i class="fas fa-cart-arrow-down"></i>
             <% end %>
<% end %>

Fontawesome 提交按钮上有 simple_form_for

Fontawesome with simple_form_for on submit button

ruby-on-rails

ruby

forms

simple-form-for