Css 使用Rails link_to和font-gem在锚定标记前添加空格

由于某些原因，我无法将CSS应用于我的链接，以便为我的图标添加间距

我在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;
}

因为我使用的是Aweasome gem字体，所以我不能将我喜欢的其他地方引用为目标

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

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

这只是显示

 ；登录

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

html\u safe

：

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

关于应用CSS-在

#某物

中没有

a

。有一个#东西。您可以尝试在之前将CSS应用于

，方法是：

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

我希望它能有所帮助。
您需要为
显示设置一个值。此外，我认为您需要转义图标图示符的值：

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

因此，字体系列的更改和其他格式问题带来了一系列问题，因此我最终得出以下结论：

      .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文件中没有使用内联样式，并在锚中添加更多样式。
我实际上全力以赴，尝试了一个#something.fa.fa lock.btn.btn sign.btn md:：before{content:“f023\00a0”！important；}。没用。以前试过a什么的。还是不行。我确实添加了“登录”的链接。html是安全的，但我的测试失败了。如果一个元素有多个类/ID，那么您必须在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；}
？什么都没有发生你试过这个吗<代码>=链接到“登录”、“www.website.com”
.something a::before {
  display: inline-block;
  content: '\f023\00a0';
}

      .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