在 Rails html.slim 中向文本添加图标

Question

所以我正在设计网站的样式并尝试在文本旁边添加图标。 图标使用自 Fontawesome。 我知道应该在 html.slim 中添加图标（因为没有相应的 HTML 文件）。我尝试的是添加

i.fa fa-user-circle.left

代码（“fa fa-user-circle”是来自 fontawesome 的图标）

.row.form-group
 .col-sm-12
   = f.email_field :email, autofocus: true, placeholder: t('element_names.email_address'), class: "form-control"
    i.fa fa-user-circle.left

我显然错过了一些东西，因为图标没有出现。

希望实现类似的目标：https://pasteboard.co/HJKCkJg.png

Answer 1

我正在使用 bulma 框架，只需将图标放在 span 标签内，类似这样，然后应用一些 bulma css 类：

form method="post" action="/login"
  .columns.is-mobile
    .column
      .title.is-4 Login
        .field.control.has-icons-left.has-icons-right
           input.input.is-primary type="text" name="username" placeholder="Username"
           span.icon.is-small.is-left: i.fas.fa-user