Question

我有一个应用程序，其中用户和组通过多对多关系链接。

我有一个连接表GroupUsers，我想让用户直接在组索引中添加或删除一个组，该组索引显示为一个表。

要添加组，我在索引的一列中添加了一个表单，用于创建GroupUser实体。问题是，我想使用Bootstrap图标加号来提交表单（user_id和group_id在隐藏字段中）。

我的专栏看起来像这样（很简单，.代替HTML部分中的class=）：

td
  = form_for @item, as: :group_user, url: "groups/#{group.id}/users" do |f|
    = f.hidden_field :user_id, :value => current_user.id
    = f.hidden_field :group_id, :value => group.id
    .form-actions
      = f.submit '' do 
        i.icon-plus-sign.icon.icon-large

目前，我只能在表格中找到一个空白按钮，而不只是一个加号，我该怎么办？

PS：我已经检查了这个答案：Add icon to submit button in twitter bootstrap 2，其中包含按钮内的引导图标，但我想要的是图标而不是按钮。

Answer 1

如bronislav所述，如果没有按钮，您将无法提交表单。如果您只想显示图片，那么我认为在您的情况下最好使用{{1>} + icon ，然后您可以使用rails image。你可以

image_submit_tag

有关更多信息，请参阅here

或

您可以执行here：
之类的操作
= f.image_submit_tag("icon.png") # => <input alt="Login" src="/images/icon.png" type="image" />

Answer 2

提交按钮必须是button[type=submit]，其中包含图标。 <input type=submit />元素不能包含节点子元素，因此您不能在其中包含<i>元素。

HTML应如下所示：

<button type="submit" class="btn btn-primary">
  <i class="icon-plus-sign icon icon-large"></i>
</button>

编辑：在苗条，我相信它看起来像：

= content_tag :button, :type => 'submit', :class => 'btn btn.primary' do
  i.icon-plus-sign.icon.icon-large

Answer 3

使用HAML，您需要执行以下操作：

= button_tag(type: 'submit', class: 'btn btn-success') do
    %span.glyphicon.glyphicon-search{"aria-hidden" => "true"}

或使用ERB

<%= button_tag(type: 'submit', class: 'btn btn-success') do %>
  <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
<% end %>

用Bootstrap图标替换Rails表单提交按钮

3 个答案: