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 '&nbsp;Sign In', 'www.website.com'

这只会显示

＆登录

Answer 1

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

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

= link_to '&nbsp;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文件中选择它，并在锚点中添加更多样式。

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

3 个答案: