web-dev-qa-db-ja.com

Ruby on Rails Bootstrap Glyphicons not working

私はbootstrap=を自分のサイトに追加しました。これは私が使用している構造です。bootstrap.cssファイルは自分の好みに合わせて変更しているため、まったく削除できません）。

>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css

すべてが正しくインポートされますが、問題はグリフィコンが動作していないことであり、必要です！

ruby-on-railstwitter-bootstrap
47
user3024194

2015年11月編集：このgemをお勧めします： https://github.com/twbs/bootstrap-sass BootstrapコミュニティとRuby on Railsとの連携.

私はあなたと非常に似た問題を抱えていましたが、私はそれを理解しました！ bootstrap.cssファイルでこの部分を見つけます。

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

../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');
}

これがお役に立てば幸いです！

100
nahtnam

Bootstrap-sassを使用していて、この問題がある場合は、scssファイルのいずれかでbootstrapのようにインポートしてください。sassを使用する場合は、構文を変換するだけです：

@import "bootstrap-sprockets";
@import "bootstrap";
44
vladCovaliov

私にとってはTwitter-bootstrap-Railsユーザー：

Takeの投稿@ GitHubに感謝

これを追加する：

/* Override Bootstrap 3 font locations */
@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');
}

わたしの application.css問題を修正しました。

役立つことを願っています。

36
Langusten Gustel

ブートストラップ3グリフィコンをRails 4。

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

to application.css.scss fileおよび

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

application.rbファイルに。

30
jbmyid

アセットパイプライン に問題がある可能性があると思います

bootstrap.cssをbootstrap.css.scssに変更して、使用箇所を置き換えたい

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

font-path （セクション2.3.2-CSSおよびSassを参照）

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

また、config/environments/production.rb

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

あなたのconfig/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

同様の問題については、別の SO post をチェックしてください。

お役に立てれば

10
user2262149

ブートストラップ3アイコンは次のようになります。

<i class="glyphicon glyphicon-indent-right"></i>

一方、Bootstrap 2は次のようになりました。

<i class="icon-indent-right"></i>

使用しているコードが最新でない場合（b3ブランチを確認してください）、フォークして自分のアイコン名を変更する必要があります。

5
Danny

どうやらChromeはこの問題に関して数か月間壊れています。

これは、customization_css.css.scssファイルの先頭に配置したときに機能しました

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
4
AliInvestor

Bootstrap 3グリフィコンが動作しない によると、Bootstrapグリフィコンフォントを台無しにするカスタマイザーにバグがあります。同じ問題がありましたが、 http://getbootstrap.com/ からbootstrap=の全体をダウンロードし、フォントファイルを正しい場所にコピーすることで修正します。

2
LeoPleurodon

私は提案された解決策を試してみましたが、うまくいきませんでした。これは 一般的な解決策 で、これに関連する問題のトラブルシューティングに役立ちます。

Bootstrap-sassを使用した結果のフォントフェイス定義は次のとおりです。

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

これを試すこともできます：

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('<%= asset_path("glyphicons-halflings-regular.eot") %>');
  src: url('<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>') format('embedded-opentype'), url('<%= asset_path("glyphicons-halflings-regular.woff2") %>') format('woff2'), url('<%= asset_path("glyphicons-halflings-regular.woff") %>') format('woff'), url('<%= asset_path("glyphicons-halflings-regular.ttf") %>') format('truetype'), url('<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>') format('svg');
}

Your_css.cssファイルをyour_css.css.erbに変換するだけです。

2
Ravi Kashyap

すべてのbootstrap=フォントファイルをpublic/fontsにコピーすれば機能します。application.rbでインポートまたは変更する必要はありません。

1
Danut Codrescu

Rails 4、sassを使用、Bootstrap 3.2.0、およびbootstrap-sass gemは以下を使用します。

@import "bootstrap";
@import "bootstrap/theme";
1
Marc Durdin

Index.html.slimファイルで、span.glyphicon.glyphicon-calendar with span.fa.fa-calendarそしてそれは働いた。

0
feng

設定したことを確認してください

# config/environments/production.rb
config.assets.compile = true

そして、プリコンパイルリストにフォントを追加します

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)
0
Deepak Mahakale

私の場合、この<i class="icon-plus"></i>を使用しました。これはBootstrapの公式サイトから取得したもので、何も表示されませんでした。代わりに、この<i class="glyphicon glyphicon-plus"></i>

0
Andrey

bootstrap in my Rails=アプリでbootstrap-sass gemを使用します。

https://github.com/thomas-mcdonald/bootstrap-sass

上書きできます。ドキュメントの説明に従ってインポートするだけです。次に、変更したファイルをインポートまたは貼り付けます。

PHPプロジェクトでは、グリフが機能していませんでした。クラシックのbootstrap= Zipをダウンロードし、グリフファイルを抽出してプロジェクトで置き換えました。私の記憶では、 custom bootstrapサイトからのスタイル（バグの原因は間違っている可能性があります）。

お役に立てれば！

0
coding addicted

グリフィコンファイルがapp/assets/fontsにある場合（ない場合は、 bootstrap-saas repo からダウンロードできます）、app/assets/stylesheets/fonts.scssを作成し、以下を追加します：

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