Ruby：在Font_field_tag中放置Font Awesome

Question

请帮我解决这个简单的问题。我没有找到任何答案。

我有这个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>

我想在我的text_field_tag中放置字体真棒，但是..

发生的是，图标显示在text_field_tag外面

实际上我知道为什么会发生这种情况，因为字体很棒，就在text_field_tag之外。我尝试在text_field_tag中放置字体很棒但是出错了。

将字体置于text_field_tag内的正确方法是什么？ 希望任何人都能回答这个简单的问题。

谢谢！

Answer 1

问题是form-control宽度设置为100%。您必须手动更改并将其display设置为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%;
}

这些CSS应该在您application.css的{​​{1}}中提供。否则，您需要为import bootstrap css中的每个属性提供important!。

Answer 2

试试这个

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

Answer 3

在引导搜索栏的右侧添加图标

我有一个类似的问题，我想在Bootstrap 4.1搜索栏的右侧添加一个搜索图标。

我有这个：

但是我想要这个：

我能够通过我正在调用的新类search_icon向图标添加位置来解决该问题。

向您的search_icon元素添加<i>类：

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

设置新类的样式：

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

信用归Rafi Benkual whose CodePen推荐给我以获取图标样式。