Ruby：将 Font Awesome 放入 text_field_tag

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

之外

其实我知道为什么会这样，因为 awesome 字体在 text_field_tag 之外。我尝试将 font awesome 放在 text_field_tag 中，但出现错误。

将 awesome 字体放入 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 应该在您 import bootstrap 的 application.css 中给出。否则，您将在 form-control css.

中为每个属性提供 top 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 搜索栏的右侧添加一个图标

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

我有这个：

但我想要这个：

我可以通过新 class 向图标添加定位来解决这个问题，我正在调用 search_icon。

将 search_icon class 添加到您的 <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>

设置新样式 class：

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

感谢 Rafi Benkual whose CodePen 向我推荐了图标样式。

Ruby：将 Font Awesome 放入 text_field_tag

Ruby: Place Font Awesome inside text_field_tag

ruby-on-rails

textfield

font-awesome

在 Bootstrap 搜索栏的右侧添加一个图标