Ruby: Place Font Awesome inside text_field_tag

Question

Please help me with this simple question. I did not found any answer.

I have this text_field_tag:

<div class="col-xs-4"><i class="fa fa-map-marker fa-2x"></i><%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %></div>

I want to place font awesome inside my text_field_tag, but..

What happen is, the icon is display outside from the text_field_tag

Actually I know why this happen, because the font awesome is outside form the text_field_tag. I try to place font awesome inside the text_field_tag but get an error.

What is the right way to place the font awesome inside the text_field_tag? Hope anyone can answer this simple question.

Thank you !

score 2 · Answer 1 · answered May 23 '16 at 07:29

2

The problem is that form-control width is set as 100%. You will have to change that manually and set its display to inline.

<div class="col-xs-4 someclass"><i class="fa fa-map-marker fa-2x"></i><%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %></div>

CSS

.someclass i {
  display: inline;
}
.someclass .form-control {
  display: inline;
  width: 95%;
}

These CSS should be given in application.css where you import bootstrap. Otherwise you will have top give important! to each attribute in the form-control css.

answered May 23 '16 at 07:29

sajinmp

398
1
7

Hi @sajinmp. This is not the answer that I'm looking for. What are you doing is just make the font awesome and text_field_tag in one line. what I want is I want the font awesome put inside the text_field_tag. Do you have any idea to make the font awesome INSIDE the text_field_tag besides making the icon and text_field_tag in one line? thank you – Fai Zal Dong May 23 '16 at 07:44
Check this out http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content – sajinmp May 23 '16 at 07:54

score 2 · Accepted Answer · answered May 23 '16 at 08:00

2

Try this

<div class="input-group">
  <%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %>
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-map-marker"></span>
  </span>
</div>

answered May 23 '16 at 08:00

Pravesh Khatri

2,124
16
22

I got the idea, but need to change just a little line of code. anyway thank you ! – Fai Zal Dong May 23 '16 at 08:04

score 1 · Answer 3 · answered Mar 03 '19 at 17:12

Add an Icon to the Right Side of a Bootstrap Search Bar

I had a similar problem where I wanted to add a search icon into the right side of a Bootstrap 4.1 search bar.

I had this:

But I wanted this:

I was able to resolve it by adding positioning to the icon via a new class I'm calling search_icon.

Add a search_icon class to your <i> element:

<div class="col-xs-4">
  <i class="fa fa-map-marker fa-2x search_icon"></i>
  <%= text_field_tag 'ip', "", maxlength: 15, class: "form-control" %>
</div>

Style the new class:

.search_icon{
  position: relative;
  float: right;
  top: 25px;
  right: 14px;
  color: #CCC;
}

Credit goes to Rafi Benkual whose CodePen tipped me off for the icon styles.

Ruby: Place Font Awesome inside text_field_tag

3 Answers3

Add an Icon to the Right Side of a Bootstrap Search Bar