使用 Rails link_to 和 font awesome gem 在锚标记前添加空格答案

【问题标题】：Add space before the anchor tag using Rails link_to and font awesome gem使用 Rails link_to 和 font awesome gem 在锚标记前添加空格
【发布时间】：2018-08-14 13:19:01
【问题描述】：

出于某种原因，我无法将 CSS 应用到我的 link_to 以便为我的图标添加间距。

我在 Slim 中进行了以下设置：

.col-md-3.offset-md-6.something
 = link_to 'Sign In', 'www.website.com', target: '_blank', id: 'something', class: 'fa fa-lock btn btn-sign btn-md'

我尝试了以下方法：

#something a::before {
  content: 'f023 \00a0;'
}
.something a::before {
  content: 'f023 \00a0;'
}
.fa-lock {
  content: 'f023 \00a0' !important;
}

由于我使用的是字体真棒宝石，我无法定位我喜欢在其他地方引用的目标。

它在页面中实际显示的是：

<a target="_blank" id="something" class="fa fa-lock btn btn-sign btn-md href="www.website.com">
 ::before
"Sign In"
</a>

我什至尝试过使用：

= link_to '&nbsp;Sign In', 'www.website.com'

这只是显示

登录

【问题讨论】：

你试过了吗？ = link_to ' Sign In', 'www.website.com'

标签： css ruby-on-rails font-awesome

【解决方案1】：

= link_to '&nbsp;Sign In', 'www.website.com'

您正在传递要呈现的 HTML 实体。您必须在该字符串上调用 html_safe：

= link_to '&nbsp;Sign In'.html_safe, 'www.website.com'

关于应用 CSS - #something 内部没有 a。有a#something。您可以尝试使用以下方法将 CSS 应用于 before：

a#something::before {
  content: 'f023 \00a0;'
  // your custom CSS
}

希望对你有帮助。

【讨论】：

其实我全班都全力以赴，尝试了 a#something .fa .fa-lock .btn .btn-sign .btn-md::before{ content: "f023 \00a0" ！重要的; }。没用。尝试了 a#something::before。仍然没有工作。我确实输入了 link_to ' Sign In'.html_safe 并且有效，但我的测试失败了。
如果一个元素有多个classes/ids，那么你必须在CSS中添加它们而没有空格，像这样：a#something.fa.fa-lock.btn.btn-sign.btn-md::before。否则，这意味着：.btn-md::before inside .btn-sign inside .btn 等。
字面上尝试了两种方法都无济于事。另外添加一个简单的空格会增加一些区别，但确实需要两个/三个空格，并且无法真正做到。
你能试试这个吗：a#something::before { margin-right: 1 rem; }？
什么都没有发生

【解决方案2】：

您需要为display 设置一个值。另外，我认为您需要转义图标字形的值：

.something a::before {
  display: inline-block;
  content: '\f023\00a0';
}

【讨论】：

【解决方案3】：

因此，字体系列被更改和其他格式问题有很多问题，所以我最终得到：

      .col-md-3.offset-md-6
        = link_to 'www.website.com',
        target: '_blank', id: 'something', class: 'btn btn-sign btn-md', style: 'color:white;' do
       div
        =fa_icon 'lock'
        p[style="display:inline; padding-left:15px;"] Sign In

不得不依靠字体真棒宝石，应用内联样式，因为无论出于何种原因，它都没有在我的 SCSS 文件中被拾取，并在锚点中添加更多样式。

【讨论】：