Rails 4.2 / Bootstrap 3:フォントを使おうとしています-素晴らしい... 2つの成功

user762579

font-awesomeを使おうとしていますが、実行すると次のエラーが発生します

ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.woff"):
....
ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.ttf"):
....
ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.svg"):

私のGemfileには次のものがあります。

 gem "font-awesome-rails"  # https://github.com/bokmann/font-awesome-rails

私のframework_and_overrides.css.scssには次のものがあります。

// import the CSS framework
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

私のapplication.cssには次のものがあります。

/*
...
*= require font-awesome
*= require dashboard/framework_and_overrides
....
*/

application.rbに追加しました:

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

そして、私はrake Assets:clobberを実行して、クリーンベースで開始します..今のところ、同じエラー

あなたの悟りをありがとう...

フリスト・ゲオルギエフ

application.cssから削除します。

*= require font-awesome

あなたのframework_and_overrides.css.scssで、下部に次の行を追加します。

@import "font-awesome-sprockets";
@import "font-awesome";

更新

アセットのルーティングに問題があることが判明しました。Railsは、アセットがプリコンパイルされているかどうかに応じて、アセットへのパスを作成します。すべての場合(本番と開発の両方)で物事を機能させる最も安全な方法は、次のようにルートを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;
}

または、外部スタイルシートをリンクすることもできます(パフォーマンスが低下する可能性があります)。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Rails4-リンク内の素晴らしいアイコンのフォント

分類Dev

フォントを使用-angluar2webpackで素晴らしい

分類Dev

フォント-2色の素晴らしいfa-circle?

分類Dev

フォントの使用-ionic2で素晴らしい

分類Dev

BootstrapMultiselectの素晴らしいBootstrapチェックボックス

分類Dev

XFCE4を素晴らしいもので使用する

分類Dev

アイコンをロードしない素晴らしいフォント-Rails4

分類Dev

フォント-Rails5アプリの素晴らしい5PRO

分類Dev

CloudFrontがフォントをロードしない-素晴らしいRails4

分類Dev

kartikactiveformでのフォントの素晴らしい使用-yii2

分類Dev

Bootstrap 4navbarブランドに表示されない素晴らしいフォント

分類Dev

bzip2エラーubuntu16.04(素晴らしい)

分類Dev

hamlを使用してRailsのlink_toメソッドに素晴らしいフォントを追加するにはどうすればよいですか?

分類Dev

yii2:フォントの素晴らしいアイコンを操作する方法は?

分類Dev

angle2webpackに素晴らしいものを追加する方法

分類Dev

1つのiタグに2つの素晴らしいアイコンがあります

分類Dev

Webpack 4 / Font-cssexport後の素晴らしい5 $ fa-font-path wong

分類Dev

Rails:フォントのインストール-WebpackerとYarnを使用したRails6.0.0-rc1で素晴らしい

分類Dev

try / catch / finallyの素晴らしい出力?

分類Dev

2つのフォントの素晴らしい矢印。一方が他方の上にあり、周囲に円があります。

分類Dev

SpaTemplatesを使用してVisualStudio2017のASP.NETCore Angular2アプリケーションに素晴らしいフォントを追加する方法

分類Dev

お問い合わせフォームの横にあるブートストラップ4フォントの素晴らしいアイコン

分類Dev

要素のUIとフォント-素晴らしい

分類Dev

素早いフォント素晴らしいアイコンの使い方は?

分類Dev

フォントの使用-fnCreatedCellで素晴らしい

分類Dev

フォント背景の素晴らしい奇妙な色

分類Dev

Ruby関数内の素晴らしいフォント

分類Dev

救済の素晴らしいフォント

分類Dev

Vue-素晴らしいスワイパー、2つのコンポーネントがお互いのボタンでスワイプ

Related 関連記事

  1. 1

    Rails4-リンク内の素晴らしいアイコンのフォント

  2. 2

    フォントを使用-angluar2webpackで素晴らしい

  3. 3

    フォント-2色の素晴らしいfa-circle?

  4. 4

    フォントの使用-ionic2で素晴らしい

  5. 5

    BootstrapMultiselectの素晴らしいBootstrapチェックボックス

  6. 6

    XFCE4を素晴らしいもので使用する

  7. 7

    アイコンをロードしない素晴らしいフォント-Rails4

  8. 8

    フォント-Rails5アプリの素晴らしい5PRO

  9. 9

    CloudFrontがフォントをロードしない-素晴らしいRails4

  10. 10

    kartikactiveformでのフォントの素晴らしい使用-yii2

  11. 11

    Bootstrap 4navbarブランドに表示されない素晴らしいフォント

  12. 12

    bzip2エラーubuntu16.04(素晴らしい)

  13. 13

    hamlを使用してRailsのlink_toメソッドに素晴らしいフォントを追加するにはどうすればよいですか?

  14. 14

    yii2:フォントの素晴らしいアイコンを操作する方法は?

  15. 15

    angle2webpackに素晴らしいものを追加する方法

  16. 16

    1つのiタグに2つの素晴らしいアイコンがあります

  17. 17

    Webpack 4 / Font-cssexport後の素晴らしい5 $ fa-font-path wong

  18. 18

    Rails:フォントのインストール-WebpackerとYarnを使用したRails6.0.0-rc1で素晴らしい

  19. 19

    try / catch / finallyの素晴らしい出力?

  20. 20

    2つのフォントの素晴らしい矢印。一方が他方の上にあり、周囲に円があります。

  21. 21

    SpaTemplatesを使用してVisualStudio2017のASP.NETCore Angular2アプリケーションに素晴らしいフォントを追加する方法

  22. 22

    お問い合わせフォームの横にあるブートストラップ4フォントの素晴らしいアイコン

  23. 23

    要素のUIとフォント-素晴らしい

  24. 24

    素早いフォント素晴らしいアイコンの使い方は?

  25. 25

    フォントの使用-fnCreatedCellで素晴らしい

  26. 26

    フォント背景の素晴らしい奇妙な色

  27. 27

    Ruby関数内の素晴らしいフォント

  28. 28

    救済の素晴らしいフォント

  29. 29

    Vue-素晴らしいスワイパー、2つのコンポーネントがお互いのボタンでスワイプ

ホットタグ

アーカイブ