Rails - 使用font-awesome圖標

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的內容 - 您仍然需要提供一個元素。

來自文檔 ：

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

如果您想單獨使用該圖標，您可以單獨調用fa_icon ：

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

-

如何按原樣使用寶石

所有“網絡字體”寶石基本上都做了以下事情：

1. 創建許多圖標的“Web字體”
2. 使用類創建一個CSS文件，每個類使用:before標簽， content: web字體

每次調用字體的一個元素（帶有class ）時，您實際上只是:before使用適當的字體引用:before添加: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