1

Rails3.2.1とRuby1.9.2では、app / asserts / fontsディレクトリにfont-awesome.css、font-awesome.min.css、font-awesome-ie7.min.cssがあります。

これが私が使用している@import宣言です：

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

次のように、config/application.rbのアセットパイプラインの一部としてfontsフォルダーをロードしてコンパイルするようにアプリケーションに指示しています。

config.assets.paths << "#{Rails.root}/app/assets/fonts"

config.assets.precompile += %w( .svg .eot .woff .ttf )

また、application.cssファイルには次のものがあります。

 *= require_self
 *= require_tree .
 *= require ./../fonts/font-awesome

最後に、これは私のHTMLです。

<i class="icon-facebook"></i>

問題は、アイコンが表示されるべき場所に、代わりに表示される小さな小さなボックスがあることです。私はこれを私のアプリのメインのcssファイルに持っています：

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}

...しかし、それでもアイコンは表示されません。

font-awesome.cssは、ソースコードに表示されているように、正しく読み込まれているようです。

<link href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" type="text/css">

アイコンの代わりにこれらの小さなボックスが表示されるのはなぜですか？明らかに私は何かが欠けています...

どんな助けでも大歓迎です。

アップデート：

上記が機能しない理由はまだわかりませんが、次のように、外部でホストされているfont-awesomeスタイルシートへのリンクリレーションをタグに作成することになりました。

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

リンク先のサイトで問題が発生した場合に備えて、上記の解決策を見つけたいと思います。

4

1 に答える 1

0

私は Ruby 1.9.3 + ブートストラップと font-awesome で同じバージョンの Rails を使用しており、完全に正常に動作しています。ここで私がしたことを助けることができれば

Gemfile

gem 'bootstrap-sass', '2.2.2.0'
gem 'bootstrap-will_paginate', '0.0.9'
gem 'font-awesome-sass-rails', '3.0.0.1'

assets/stylesheet application.css.scssに次の行を追加します

 *= require _font-awesome

assets/javascripts/application.jsに次の行を追加します

//= require bootstrap

次に、ブートストラップをインポートして必要なものをオーバーライドするスタイルシートを作成し、「bootstrap-and-overrides.css.scss 」と呼び ます

@import "bootstrap";

それだけです... Font-awesomeは正常に表示されます（テキストとアイコン）...

これがあなたを助けることを願っています

乾杯

于 2013-03-15T09:27:17.227 に答える