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

【问题标题】：Adding icons to text in Rails html.slim在 Rails html.slim 中向文本添加图标
【发布时间】：2018-10-23 07:59:01
【问题描述】：

所以我正在设计网站并尝试在文本旁边添加图标。图标来自 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

【问题讨论】：

我不熟悉 rails 和 slim lang，但如果您的目标是将所有三个 fa fa-user-click left 类分配给 i 元素，我认为您有错字。你可能应该把它写成i.fa.fa-user-circle.left
谢谢，我似乎更近了一步，因为删除空间至少放置了图标：pasteboard.co/HJL9KK1.png 现在我需要弄清楚如何将它放置到那里的正确位置跨度>
您可以尝试将图标移动到 email_field 上方。然后只需调整 CSS 定位即可。
是的，我可以使用 css 来定位它，但我至少需要将它放在同一行，否则会产生不必要的空间。

标签： html ruby-on-rails icons slim-lang

【解决方案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

【讨论】：