html - 跨度外的 form_for 图标

Question

我遇到了一个问题，我无法为图标更改 Rails 表单上的提交按钮(特别是使用 ionic 图标，但字形图标也不起作用)；

下图是发生了什么 - 顶部的搜索框只是带有样式化 CSS 的 HTML，第二个是用于以下内容的表单:

http://imgur.com/gallery/QXwAcyr/new

下面是当前代码:

          <div class="row"><br>
              <div class="col-md-6">
                  <div id="custom-search-input">
                      <div class="input-group col-md-12">
                          <input type="text" class="form-control input-lg" placeholder="search for foods" />
                          <span class="input-group-btn">
                              <button class="btn btn-info btn-lg" type="button">
                                  <i class="icon ion-ios-search nav-icon"></i>
                              </button>
                          </span>
                      </div>
                  </div>
              </div>
          </div>

Rails 代码如下:

<div class="row"><br>
    <div class="col-md-6">
        <div id="custom-search-input">
            <div class="input-group col-md-12">
              <%= form_tag nut_databases_path, method: :get do %>
              <span class="input-group-btn">
                <%= text_field_tag :search, params[:query], class: "form-control input-lg",  :placeholder => "search for foods", id: "query-alt", autocomplete: "off" %>
                  <%= button_tag(type: 'submit', class: "btn btn-info btn-lg") do %>
                      <i class="icon ion-ios-search nav-icon"></i>
                  <% end %>
              <% end %>
            </span>
            </div>
        </div>
    </div>
</div>

Answer 1

erb 标记中的 span 标签包装了 text_field_tag 和 button_tag。尝试重写它以只包装按钮标签，就像它上面的纯 HTML 版本一样，如下所示:

<div class="row"><br>
  <div class="col-md-6">
    <div id="custom-search-input">
      <div class="input-group col-md-12">
        <%= form_tag nut_databases_path, method: :get do %>
          <%= text_field_tag :search, params[:query], class: "form-control input-lg",  :placeholder => "search for foods", id: "query-alt", autocomplete: "off" %>
          <span class="input-group-btn">
            <%= button_tag(type: 'submit', class: "btn btn-info btn-lg") do %>
              <i class="icon ion-ios-search nav-icon"></i>
            <% end %>
          </span>
        <% end %>
      </div>
    </div>
  </div>
</div>

希望对您有所帮助!