58

私の Web デザイナーは、font awesome に追加された更新されたフォント/アイコンを提供してくれました。彼はこれをローカルのフォント フォルダーに配置しました。font-awesome.css ファイルも提供されました。

fonts フォルダーをアセットに直接コピーし、font-awesome.css を assets/stylesheets に配置しました。

css は私のコードで正しく参照されていますが、フォント フォルダーのアイコンはどれも読み込まれません。

すべてが正しくロードされること、および/またはフォントフォルダーが参照されることを確認するために何かする必要がありますか?

4

10 に答える 10

124

最初に: app/assets/fonts をアセット パス (config/application.rb) に追加します。

config.assets.paths << Rails.root.join("app", "assets", "fonts")

次に、フォント ファイルを /assets/fonts に移動します (最初にフォルダーを作成します)。

font-awesome.css の名前を font-awesome.css.scss.erb に変更し、次のように編集します。

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')    format('svg');
  font-weight: normal;
  font-style: normal;
}

これに：

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

最後に: すべてのリソースが正しくロードされていることを確認します (Firebug または Chrome Inspector を使用)。

于 2012-06-15T15:28:54.840 に答える
49

に追加gem "font-awesome-rails"してGemfile実行する だけの簡単な方法がありますbundle install。

次に、application.css に css ファイルを含めます。

/*
 *= require font-awesome
 */

font-awesome をアセット パイプラインに自動的に含めます。終わり。それを使い始めます:)

詳細については、font-awesome-rails のドキュメントを確認してください。

于 2013-07-23T09:09:40.037 に答える
14

Vicoarの答えに加えて

Rails 4 では、CSS を少し異なる方法で変更する必要があります。font_url の使用法に注意してください。

@font-face {
  font-family: "FontAwesome";
  src: font_url('fontawesome-webfont.eot');
  src: font_url('fontawesome-webfont.eot?#iefix') format('eot'), font_url('fontawesome-webfont.woff') format('woff'), font_url('fontawesome-webfont.ttf') format('truetype'), font_url('fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
于 2015-03-10T16:09:59.167 に答える
5

次に、Font Awesome を Rails に統合する最も簡単な方法を次に示します。

SASS ルビージェム

公式の Font Awesome SASS Ruby Gem を使用して、Font Awesome SASS を Rails プロジェクトに簡単に組み込むことができます。

次の行をアプリケーションの Gemfile に追加します。

gem 'font-awesome-sass'

そして、実行します：

$ bundle

これを Application.scss に追加します。

@import "font-awesome-sprockets";
@import "font-awesome";
于 2016-12-10T12:38:58.403 に答える
4

Rails 6 + Webpacker 用。

Yarn を使用してインストールできます。yarn add @fortawesome/fontawesome-free

次に、次のapp/javascript/packs/application.js行を追加する必要があります。

require("@fortawesome/fontawesome-free/js/all")

それは私のために働いた！それが他の人を助けることができることを願っています!

于 2020-06-14T15:32:20.250 に答える
1

vicoar を試してみましたが、Ruby 1.9.3 と Rails 3.2 に基づく私のプロジェクトでは機能しません。次に、ファイル名font-awesome.cssを次のようfont-awesome.css.erbに変更し、次のように変更します@font-face。

@font-face {
  font-family: "FontAwesome";
  src: url(<%= asset_path 'fontawesome-webfont.eot' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), url(<%= asset_path 'fontawesome-webfont.woff' %>) format('woff'), url(<%= asset_path 'fontawesome-webfont.ttf' %>) format('truetype'), url(<%= asset_path 'fontawesome-webfont.svg' + '#FontAwesome' %>) format('svg');
  font-weight: normal;
  font-style: normal;
}

それは非常にうまく機能し、コードは非常に単純です...（ガイドasset_pipelineを参照できます

于 2012-08-15T20:09:39.630 に答える