Rails Простая форма ввода с Font-Awesome

Question

Я хочу использовать значки вместо текста для надписей в горизонтальной простой форме.Однако я не могу отделить текст от значков

= simple_form_for @user, html: { class: 'form-horizontal' }, wrapper: :horizontal_form do |f|

  # shows 'username' label only
  = f.input :username

  # shows icon with 'username'
  = f.input :username, label_html: {class: "fas fa-user"}

  # shows nothing
  = f.input :username, label_html: {class: "fas fa-user"}, label: false

Answer 1

wrapper_html: и label_html: были сложными, поэтому я просто сделал это вручную

.row
  .col-3
    .text-right
      i.fas.fa-user
  .col-9
    = f.input_field :username, label: false, class: 'form-control'

Answer 2

Для тех, кто хочет сделать то же самое, есть более простой / чистый способ:

= f.label :username, label: ('<i class="fas fa-user"></i>').html_safe
= f.text_field :username

Также работайте с файлом локализации I18n:

(en.yml)
username: '<i class="fas fa-user"></i>'

затем

= f.label :name, label: t(:username).html_safe
= f.text_field :username

Использование simple_form (4.1.0)

Надеюсь, эта помощь.

Answer 3

Вы можете использовать опцию wrapper_html:

= f.input :username, label: false, wrapper_html: { class: 'fa fa-user' }

Возможно, вам придется добавить немного CSS, чтобы он выглядел так, как вы хотите.Например, чтобы значок находился в строке, отличной от ввода, мне пришлось добавить display: block к значку.