CODEWITHSUNDEEP
cssruby-on-railsfont-awesome
ECsAUtaVku
ECsAUtaVku

Reputation: 405

How do I add an icon inside a text_field_tag

I'm using Rails 4 and Font Awesome (sass). I would like to add an icon to the left side of the search function, just like on Stack Overflow. This is my code for the search function.

index.html.erb

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

How would I go about to add:

<%= icon 'search' %>

into my text_field_tag so that I can also style the icon? Thanks.

Upvotes: 0

Views: 1770

Answers (2)

Kurt Peniket
Kurt Peniket

Reputation: 21

This can be done easily using 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>

Upvotes: 0

JustH
JustH

Reputation: 1402

The easiest way to accomplish this, is to place the input and the icon together in a container ( form or div ) and use css to place the icon next to the search field and style to match.

quick gist http://sassmeister.com/gist/77508f4dccce9ced82c6

Upvotes: 2

Related Questions