Встраивание значков в Rails text_field placholder с HAML

Question

Встраивание значков в Rails text_field placholder с HAML

3

Я работаю над проектом rails, и он использует бутстрап, и я хочу вставить значок из удивительного шрифта в местозаполнитель текстового поля. Код выглядит следующим образом:

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

Я знаю, что я должен обычно делать курсивный тег с классом, являющимся значком, который я хочу ссылаться, но я теряюсь от того, как именно я должен вставлять это в placeholder, не говоря уже о рельсах form_for блок, написанный с помощью HAML. Любая помощь приветствуется.

jaredsmith 27 июль 2013, в 22:12

Источник

Теги:

twitter-bootstrap

ruby-on-rails

haml

font-awesome

1 ответ

Ещё вопросы

matt · Accepted Answer · 2013-07-28T02-47-00.000Z

Вы можете указать символ в значении plaeholder старомодным способом с использованием сущности, если вы сначала установили стиль input, чтобы шрифт был FontAwesome (или, по крайней мере, первый шрифт в стеке - FontAwsome.

Например, если вы хотите использовать значок icon-search, который находится в кодовой точке 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: "&#xf002; Search for topics..."

(Вам все равно нужно стилизовать input, чтобы он использовал правильный шрифт, как указано выше.)

Вам определенно нужен .html_safe, чтобы он появился, хотя он показывает мне только квадрат в строке поиска .. imgur.com/9xAnMOb (другое увеличительное стекло - мое временное исправление, поместив его рядом с панелью поиска).
@jaredsmith Вы установили семейство font-family для ввода в блоке style где-нибудь? Квадрат, показывающий, предполагает, что браузер использует шрифт, у которого нет этого символа.
Да, в файле CSS, который я сделал, без него мой текст определенно выглядит иначе, поэтому я уверен, что стиль также применяется. Для fontawesome я использую драгоценный камень font-awesome-rails, я не уверен, имеет ли это значение, но подумал, что должен упомянуть.
Поэтому я обнаружил, что это драгоценный камень не загружает шрифт правильно, и что если вы используете cdn fontawesome в заголовке, появится увеличительное стекло. Спасибо за помощь!