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";

在我的 gemfile 中：

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

我也在使用 bootstrap 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 的内容 - 你仍然需要提供一个元素。

From the docs:

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 文件，每个类使用带有content: 网络字体的:before 标记

每次调用字体元素之一（使用class）时，实际上只是在: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