2

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 を配置するにはどうすればよいですか?

4

3 に答える 3

5

ヘルパーはのコンテンツを入力するだけのようcontent_tagです-まだ要素を提供する必要があります。

ドキュメントから

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

アイコンを単独で使用したい場合は、fa_icon個別に呼び出すことができます。

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

--

ジェムを意図したとおりに使用する方法

すべての「Web フォント」gem は、基本的に次のことを行います。

  1. 多くのアイコンの「Web フォント」を作成する
  2. クラスを含む CSS ファイルを作成します。各クラスは Web フォントの:beforeタグを使用します。content:

フォントの要素の 1 つを ( で) 呼び出すたびに、適切なフォント参照をclassa の先頭に追加しているだけです。: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 を使用しました。結果は次のとおりです。

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

于 2015-11-12T12:07:28.807 に答える
3

これを試して:

純粋な HTML:

<a class="btn btn-lg btn-social btn-github" href="<%= content_tag_url %>">
    <i class="fa fa-facebook"></i> Facebook
</a>
于 2015-11-12T00:57:26.740 に答える
0

include FontAwesome::Rails::IconHelperに追加 app/helpers/application_helper.rb

于 2015-11-12T01:09:51.057 に答える