ruby-on-rails - 使用 HAML 在 Rails text_field 占位符中嵌入图标

Question

我正在开发一个 Rails 项目，它正在使用 Bootstrap ，我想将 awesome font 中的图标嵌入到文本字段的占位符中。代码如下所示:

#search
  = form_for :search, url: topic_search_path do |f|
    = f.text_field :search_query, placeholder: "Search for topics..."

我知道我通常应该制作一个斜体标签，类是我想要引用的图标，但我不知道我应该如何将它嵌入到占位符中，更不用说嵌入到 rails 中了用 HAML 编写的 form_for block 。非常感谢任何帮助。

Answer 1

您可以使用实体以老式的方式在plaeholder 的值中指定字符，只要您首先设置input 的样式，以便字体是 FontAwesome(或者至少堆栈中的第一个字体是 FontAwsome。

例如，如果您想使用 icon-search icon , 它位于代码点 F002 (代码点在图标网页上)，然后你想生成这样的东西(假设你为页面设置了 Font Awesome):

<style>
input /* be more selective here if you want */ {
  font-family: FontAwesome;
}
</style>

<input placeholder="&#xf002; Search for topics...">

要从 text_field 方法生成它，只需将实体作为选项散列中 placeholder 键值的一部分传递(您可能需要使用 .html_safe 这里，我还没有测试最后一点):

= f.text_field :search_query, placeholder: " Search for topics..."

(您仍然需要为 input 设置样式，以便它使用正确的字体，如上所述。)