使用Rails link_to和字体真棒gem在定位标记之前添加空间

Question

由于某些原因，我无法将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 ' Sign In', 'www.website.com'

这只是显示

＆登录

Answer 1

= link_to ' Sign In', 'www.website.com'

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

= link_to ' Sign In'.html_safe, 'www.website.com'

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

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

希望对您有所帮助。

Answer 2

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

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

Answer 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文件中找到它，并在锚点中添加了更多样式。