如何在 text_field_tag 中添加图标

Question

我正在使用 Rails 4 和 Font Awesome (sass)。我想在搜索功能的左侧添加一个图标，就像在 Stack Overflow 上一样。这是我的搜索功能代码。

index.html.erb

<%= form_tag products_path, method: :get do %>
  <%= text_field_tag :query, params[:query], placeholder: "Search..." %>
<% end %>

我将如何添加：

<%= icon 'search' %>

到我的 text_field_tag 以便我也可以设置图标样式？谢谢

Answer 1

完成此操作的最简单方法是将输入和图标放在一个容器中（form 或 div）并使用 css 将图标放在旁边匹配的搜索字段和样式。

快速要点http://sassmeister.com/gist/77508f4dccce9ced82c6

Answer 2

这可以使用 Bulma and Font Awesome 轻松完成。

<div class="field">
   <%= f.label (:query%>
   <div class="control has-icons-left">
     <%= f.text_field (:query), class: "input" %>
     <span class="icon is-small is-left">
       <i class="far fa-search"></i>
     </span>
   </div>
</div>

如何在 text_field_tag 中添加图标

How do I add an icon inside a text_field_tag

css

ruby-on-rails

font-awesome