Question

我遇到了一个问题，我无法在Rails表单上更改图标的提交按钮（特别是使用离子图标，但字形图标也不起作用）;

下面的图片是出现的 - 顶部搜索框只是带有样式CSS的HTML，第二个是以下形式：

以下是当前代码：

          <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>

希望它有所帮助！

form_for span之外的图标

1 个答案: