在 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

[输入带图标的用户名][1] [1]： https://i.stack.imgur.com/PXJMm.png