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类：

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

Input username with icon

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

1 个答案: