web-dev-qa-db-ja.com

Rails：Font Awesomeの使用

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

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

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

すべてが正しくロードされるようにするため、および/またはフォントフォルダが参照されるようにするために私がしなければならないことはありますか？

ruby-on-railsfontsfont-awesome
57
user464180

最初：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に変更し、次のように編集します。change：

@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を使用）

123
VMOrtega

より簡単な方法があります。gem "font-awesome-Rails"をGemfileに追加し、bundle install。

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

/*
 *= require font-awesome
 */

それはあなたのアセットパイプラインに自動的に素晴らしいフォントを含めます。できたそれを使用して開始:)

詳細については、 font-awesome-Rails documentation を確認してください。

47
nathanvda

私は別の答えを提供します。これでは、宝石やパス、またはそれらの過剰なソリューションのいずれかを心配する必要はありません。 application.html.erb（またはレイアウトのファイル）にこの行を貼り付けるだけです

<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
20
Guillermo Siliceo Trueba

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;
}
14
EdC

Font AwesomeをRailsに統合する最も簡単な方法は、次のとおりです。

SASS Ruby Gem

公式のFont Awesome SASS Ruby Gemを使用して、Font Awesome SASSを簡単にRailsプロジェクトに入れます。

この行をアプリケーションのGemfileに追加：

gem 'font-awesome-sass'

そして実行：

$ bundle

これをApplication.scssに追加：

@import "font-awesome-sprockets";
@import "font-awesome";
3
AR Rose

Font-awesome 4をベアボーンRails 6およびWebpackerで使用し、追加の宝石なしで、フォントまたはcssファイルをアプリにコピーアンドペーストし、その他の奇妙なことを行う方法：

Font-awesome npmパッケージを追加— package.json：

{
  "dependencies": {
    "font-awesome": "4.7.0"
  }
}

Font-awesome cssファイルをcssマニフェストに含める— app/stylesheets/application.css：

/*
 *= require font-awesome/css/font-awesome.min
 *= require_tree .
 *= require_self
 */

カスタムcssファイル（app/stylesheets/font-awesome.css.erb）のフォントフェース定義をオーバーライドします。

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

Node_modules font-awesome dir +フォントファイルタイプをアセットパイプラインに含める-config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules/font-awesome/fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

フォントをpublic/fontsディレクトリに含めてコンパイルし、すべてのもの（アプリとフォント）がコンパイルされた単一のcssファイルを取得します。

事は、フォントの素晴らしい縮小されたcssにはフォントへのハードコードされたパスが含まれており、これをオーバーライドするために、生成されたフォントパスでfont-faceディレクティブを追加するだけです。このため、最初にfont-awesome.min.cssをマニフェストファイルに追加する必要があります。

1
Vladimir Rozhkov

Rails 5.2でこれを行った後、 the font-awesome-Rails gem ：を使用したくない場合の動作を共有したいと思います。

  1. FontAwesomeフォントファイル（EOT、WOFFなど）を/ app/assets、/ vendor/assetsまたは/ lib/assets、例：/ app/assets/fonts。

  2. この行をconfig/initializers/assets.rbに追加します。

    Rails.application.config.assets.paths << Rails.root.join（ "app"、 "assets"、 "fonts"）

  3. FontAwesomeのall.cssの名前をall.scssに変更します。これを行わない場合、Railsは次のステップでパス参照を前処理しません。

  4. フォントファイルへのすべてのパスをRailsパイプラインリファレンス（たとえば、 font-url または asset-url ）に置き換えます。

    eg。前

    @ font-face {font-family： 'Font Awesome 5 Free';フォントスタイル：通常。フォントの太さ：900; src：url（ "../ webfonts/fa-solid-900.eot"）; src：url（ "../ webfonts/fa-solid-900.eot？#iefix"）format（ "embedded-opentype"）、url（ "../ webfonts/fa-solid-900.woff2"）format（ "woff2"）、url（ "../ webfonts/fa-solid-900.woff"）format（ "woff"）、url（ "../ webfonts/fa-solid-900.ttf"）format（ "truetype "）、url（" ../ webfonts/fa-solid-900.svg＃fontawesome "）format（" svg "）; }

    eg。後

    @ font-face {font-family： 'Font Awesome 5 Free';フォントスタイル：通常。フォントの太さ：900; src：asset-url（ "fa-solid-900.eot"）; src：asset-url（ "fa-solid-900.eot？#iefix"）format（ "embedded-opentype"）、asset-url（ "fa-solid-900.woff2"）format（ "woff2"）、asset -url（ "fa-solid-900.woff"）format（ "woff"）、asset-url（ "fa-solid-900.ttf"）format（ "truetype"）、asset-url（ "fa-solid- 900.svg＃fontawesome "）format（" svg "）; }

  5. サーバーを再起動します。

0
MSC

Rails 3.2。*の簡単な解決策：

1）素晴らしいファイルをパブリックフォルダーの「fonts」フォルダーに配置します2）font-awesome.cssを開き、ファイルの上部にある「../fonts」の4つのエントリを「/ fonts」に変更します

@font-face
{
     font-family:'FontAwesome';
     src:url('/fonts/fontawesome-webfont.eot?v=3.2.1');
     src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') 
     format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1') 
     format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1') 
     format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');
     font-weight:normal;
     font-style:normal;
}
[class^="icon-"],[class*=" icon-"]
{
     font-family:FontAwesome;
     font-weight:normal;
     font-style:normal;
     text-decoration:inherit;
     -webkit-font-smoothing:antialiased;
     *margin-right:.3em;
}
0
Tom