css - Rails - 使用字体很棒的图标

Question

我有一个 rails 4 应用程序，并且正在尝试使用其中的字体真棒图标（用于社交媒体登录链接）。

我有：

 /* application.css.css:
 *= require_framework_and_overrides.css.scss
 *= require_self
 *= require_tree .
 */

/* framework_and_overrides.css.css: */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

在我的宝石文件中：

gem 'font-awesome-sass', '~> 4.4.0'

我也在使用引导 sass。

在我看来，我尝试：

<%= link_to content_tag(icon('facebook', class: 'facebookauth')) %>

它呈现“<>>”，中间没有任何内容。

我也试过：

<%= link_to content_tag icon('facebook', class: 'facebookauth') %>

我犯了同样的错误。

当我尝试：

<%= link_to content_tag(fa_icon('facebook', class: 'facebookauth')) %>
<%= link_to content_tag fa_icon('facebook', class: 'facebookauth') %>

我收到此错误：

undefined method `fa_icon' for

有谁知道如何在 Rails 中使用 font-awesome？

新尝试：

                        <%= link_to  icon('google', id: 'googleauth'), user_omniauth_authorize_path(:google_oauth2) %>

                        <%= link_to icon('linkedin', id: 'linkedinauth'), user_omniauth_authorize_path(:linkedin) %>

                        <%= link_to icon('twitter', id: 'twitterauth'), user_omniauth_authorize_path(:twitter) %>
                    <% end %>   

这可以很好地制作链接，但我正在尝试在图标上设置样式。

我已经定义了一个名为 :facebookauth 的 CSS div。

当我将上述内容更改为：

<%= link_to icon('facebook', id: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>

或尝试：

<%= link_to icon('facebook', class: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>

链接消失。我想让尺寸更大并使用我的颜色样式。如何将 CSS 放在这些链接上？

Answer 1

助手似乎只是填充的内容-content_tag你仍然需要提供一个元素。

从文档：

content_tag(:li, fa_icon('facebook', class: 'facebookauth'))

如果您想单独使用该图标，您可以fa_icon单独调用：

fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>

--

如何按预期使用 gem

所有“网络字体”gem 基本上都执行以下操作：

1. 创建许多图标的“网络字体”
2. 创建一个带有类的 CSS 文件，每个类使用web 字体的:before标签content:

每次调用字体元素之一（使用class）时，实际上只是在 a 前面:before加上适当的字体引用。

因此，为了做到这一点，您需要一个有效的 HTML 元素。fa_icon助手似乎创建了一个标签<i>-- <i class="fa fa-camera-retro"></i>。如果您想将它与 一起使用content_tag，则需要为 Rails 提供另一个元素来包装内容。

--

更新

确保它像这样工作：

<%= link_to fa_icon("facebook", text: "Facebook", class: "facebookauth"), your_path %>

我们最近在一个项目中使用了 gem，结果如下：

Answer 2

尝试这个：

纯 HTML：

<a class="btn btn-lg btn-social btn-github" href="<%= content_tag_url %>">
    <i class="fa fa-facebook"></i> Facebook
</a>

Answer 3

添加 include FontAwesome::Rails::IconHelper到app/helpers/application_helper.rb