web-dev-qa-db-ja.com

Bootstrap 3 + Rails 4-特定のグリフィコンが機能しない

bootstrap 3 in my Rails 4 app。Followed this tutorial to set up bootstrap 3 using bootstrap saas from this github page。

ブートストラップは正常に機能していますが、グリフィコンは期待どおりに機能していません。

特定のグリフィコンがまったく表示されません。例えば私はapplication.html.erbでテストするためにそれらのいくつかを表示するのに疲れました：

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span>

アイコンは this のように表示されます

フロッピーディスクのアイコンがまったく表示されない（無効な文字を表示）プラスとマイナスのシグは太字ではなく、bootstap Webサイトに表示されるものよりもはるかに小さくなっています。

また、Railsコンソールで次のメッセージが表示されます。

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

この問題に関するご意見をお待ちしております。

ありがとう！

ruby-on-rails-4twitter-bootstrap-3twitter-bootstrap-rails
36
Mike G

同じ問題があり、解決策を見つけました。完全な功績は、このトピックに関する詳細なブログ投稿を書いた Eric Minkel にあります。さらなる推論のためにそれを読むことを強くお勧めします。

  1. 以下を追加してapp/assets/stylesheets/application.cssを編集します：

    *= require bootstrap

  2. 以下を追加してapp/assets/javascripts/application.jsを編集します：

    //= require bootstrap

  3. config/application.rbで、class Application < Rails::Applicationの後に次を追加します。次のようになります。

    class Application < Rails::Application
    config.assets.paths << "#{Rails}/vendor/assets/fonts"

  4. ターミナルで、次を実行してアセットをコンパイルします。

    rake assets:precompile Rails_ENV=development

  5. bootstrap.cssリソースの場所を@font-faceから../fonts/に変更して、/assets/ファイルを編集します。次のようになります。

    @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/assets/glyphicons-halflings-regular.eot');
    src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

できました。 Rails sで再起動すると、グリフィコンが表示されます。

56
oddurs

ただ使用する：

@import "bootstrap-sprockets";
@import "bootstrap";

sCSSまたはSASSファイルで。画像とフォントの修正には「ブートストラップスプロケット」が必要です。

あなたはすでに持っている可能性があります：

@import "bootstrap";

application.scssで宣言されています。

30
istickz

私はこれと同じ問題を抱えていました。以下を追加して解決しました：

@import "bootstrap-sprockets";

既存の行の上：

@import 'bootstrap';

/app/stylesheets/bootstrap_and_customisation.css.scssファイル

13
Andy

同じ問題がありました。ブートストラップのフォントパスに問題があります。幸いなことに、これはかなり簡単な修正です。

$icon-font-path: 'bootstrap/';

これは私のためにそれを修正しました。 bootstrap-sassをインポートする前に行ってください。ここで値を変更する必要がある場合があります。

11
Radoslav Stankov

これに更新します。私は同じ問題を抱えていて、Oddursからの＃1回答で提供された手順を実行しました。なんらかの理由でそれはうまくいきませんでした。そして、私はそれが私のパブリックフォルダ内のファイル構造に関係していることに気付きました（なぜ私のものが違うのか分かりません）。

基本的に、すべてのグリフィコンはデフォルトで「/ bootstrap」フォルダにあるため、「/ assets」の後に「/ bootstrap」を追加することで動作するようになりました。

したがって、これの代わりに：

@font-face {
 font-family: 'Glyphicons Halflings';
 src: url('/assets/glyphicons-halflings-regular.eot');
 src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

これは私がしました：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/assets/bootstrap/glyphicons-halflings-regular.eot');
  src: url('/assets/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('/assets/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

application.cssで。うまくいけばそれは誰かを助ける

6
strohy1210

Bootstrap-sass-officialを使用している場合は、ブートストラップをインポートする前にこれを追加します。

$icon-font-path: 'bootstrap-sass-official/assets/fonts/bootstrap/';

4
dipole_moment

別の解決策は、フォントフォルダをパブリックにコピーして、

public/fonts/glylpicons-.....

同じ解決策は、フォントのすばらしさなどで機能します。これの唯一の欠点は、フォントファイルを頻繁に変更する場合です：o）

4
DaCart

私にとって、これはbootstrap-sassとsassの間のバージョンの非互換性に関する問題でした。

生成されたapplication.cssを調べると、@ font-faceが@ at-root内にラップされていることがわかります。これは、使用しているsassのバージョンではサポートされていない新しいsass宣言です。

私はsass-Railsを5.0.3にアップグレードし、sassを3.4.16にアップグレードしました（sassは少なくとも3.3である必要があります）。

4
Giórgenes

同様の問題があり、bootstrapアセットの古いバージョンが提供されていました。この投稿のおかげで： Rails with Twitter Bootstrap：まだ古いアセットを提供しています Iただ走ったrake tmp:clearそしてその後すべてが機能しました。

3
mahi-man

Twitter-bootstrap-Railsを使用していますが、エラーメッセージは/ assets/Twitter/fonts/...です。

その理由は、Twitter-bootstrap-Rails gemのベンダーディレクトリにGlyphiconsリソースが含まれていないためです。上記のすべてのソリューションを試しましたが、どれも機能しませんでした。

最終的な解決策は、Zipファイルをbootstrap公式サイトからダウンロードし、解凍し、不足しているファイルをpublic/assets/Twitter/fontsディレクトリに移動することです。これは私の開発環境で機能します。

2
chao yan

gemfileが最新であり、vendor/cacheが明確であることを確認してください。

私の問題はgemsの奇妙なバージョンによるものだったので、bundle updateを実行してcacheを更新しました。

Updating files in vendor/cache
Removing outdated .gem files from vendor/cache
  * bullet-4.14.9.gem
  * bootstrap-sass-3.3.5.gem
  * pry-0.10.2.gem
  * webmock-1.21.0.gem
  * sprockets-2.12.4.gem
  * minitest-reporters-1.1.3.gem
  * sass-3.2.19.gem
  * coffee-Rails-4.0.1.gem
  * hashie-3.4.2.gem
  * newrelic_rpm-3.13.2.302.gem
  * nprogress-Rails-0.1.6.7.gem
  * schema_plus_pg_indexes-0.1.7.gem
  * hike-1.2.3.gem
  * minitest-5.8.1.gem
  * tilt-1.4.1.gem
  * sass-Rails-4.0.5.gem
Bundle updated!

それができたら、他のキャッシュもrake assets:clobberクリアし、アセットを再コンパイルRails_ENV=production rake assets:precompileするための適切な対策を講じます。

その後、nginx ../bin/restartと魔法を再起動しました。デスクトップのFirefoxとiPadのカメラでは、グリフィコンが奇妙な四角形の代わりに表示されました。すべては男性グリフィコンの代わりに。

1
Turgs

すべてのbootstrapフォントファイルをpublic/fontsにコピーすれば動作します

0
Danut Codrescu

Rails 4.1.4、bootstrap-sass 3.2.0。にアップグレードするときに同じ問題に遭遇しました。

上記の良いヒントはありますが、私にとってはうまくいきませんでした。

これらのステップは機能しました：

  1. フォントファイルをRails_ROOT/vendor/assets/fonts/bootstrap /にコピーします（おそらくディレクトリを作成する必要があります）

  2. これをconfig/application.rbに追加します

    config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

特別なディレクティブやsass変数の再定義は必要ありませんでした。

0
Foot

Bootstrap-sassまたはTwitter-bootstrap-Railsの魔法にうんざりしている場合、または特定のバージョンのbootstrapを使い続けたい場合は、次の方法を使用できます。

  • ダウンロードbootstrap from http://getbootstrap.com/ 、ファイルを#{Rails.root}/vendor/assets/javascripts

  • ファイルapp/assets/javascripts/application.jsで、//= require 'bootstrap-3.3.6-dist/js/bootstrap.min'

  • ファイルapp/assets/stylesheets/application.cssで、*= require 'bootstrap-3.3.6-dist/css/bootstrap.min'

  • このようなスクリプトを{Rails.root}/binに入れて、実行するように設定します本番環境に展開するときのcapistrano：

#!/usr/bin/env Ruby     

Rails_path = File.expand_path('../../', __FILE__)
puts Rails_path

`mkdir public/images`

Dir.glob("#{Rails_path}/vendor/assets/**/images").each do |directory|
  `cp #{directory}/* #{Rails_path}/public/images/`
end

`mkdir public/fonts`

Dir.glob("#{Rails_path}/vendor/assets/**/fonts").each do |directory|
  `cp #{directory}/* #{Rails_path}/public/fonts/`
end
  • public/imagesおよびpublic/fonts。
        location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

これからは、cap production deploy、すべての手作業が処理されます。

0
Châu Hồng Lĩnh

Rails 4.2.6を使用

config/application.rbを編集する必要がありました

この行を追加しました

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = '/myapp'

これで、フォントはrelative_url_root値に関連して参照されていました。

0
mwangi

表示に問題がありました：

<span class="glyphicon glyphicon-edit"></span>

私の開発環境で。次の調整が機能しました。

Css.scssファイルに次を追加します。

@import "bootstrap-sprockets";
@import 'bootstrap';
0
erickuhn19

私はangular-ui-bootstrap-Railsgemを使用しています

gem 'angular-ui-bootstrap-Rails'

bootstrap をダウンロードし、apps/assetsフォルダーの下にfontsフォルダーを貼り付けました

その後、Rails server。

0
Mahesh

Application.scssに以下を追加すると、Rails 5（コメント解除後@import "bootstrap/glyphicons";同じファイルから[ orats gemを使用]）

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/assets/bootstrap/glyphicons-halflings-regular.eot');
    src: url('/assets/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('/assets/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
0
Caleb