使用Font-Awesome输入Rails Simple Form

Question

我想在水平simple_form中使用图标而不是文本作为标签。但是，我无法将文本与图标分开

= 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选项：

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

您可能需要添加一些CSS以使其看起来像您想要的那样。例如，要将图标放在与输入不同的行上，我必须将display: block添加到图标中。

Answer 2

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 3

对于那些想要做同样事情的人来说，有一种更简单/更清洁的方式：

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

希望这有帮助。