質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

AWSでbootstrap-glyphiconが表示されない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,018

yukkys

score 36

前提・実現したいこと

AWSでbootstrapのglyphiconを表示させたい。

プリコンパイルは通り、bootstrapのcssは適用されたAWSのEC2が立ち上がりましたが、glyphiconが表示されません。
ローカル環境でも問題ありませんでした。

発生している問題・エラーメッセージ

ローカル環境で表示されるglyphiconが、AWSでは表示されず、chromeでは全てのglyphicom部が□で置き換えられ、safariでは何も出ない状態です。

該当のソースコード

↓ bootstrap.cssのglyphicon読み取り部分?

@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.woff2") format("woff2"), 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"); }


↓ public/assetsの中の一部抜粋

fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf
fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf.gz
fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff
fontawesome-webfont-b3a230dc956cc55ffcae2ef35660fd047582e155065a962b33efc28ed2818a7f.svg
fontawesome-webfont-b3a230dc956cc55ffcae2ef35660fd047582e155065a962b33efc28ed2818a7f.svg.gz
fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot
fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot.gz
gazou12-e1426694824704-a352244aa5cc802ab19dc6f61ea8fbdae10ee528eb028e6f48a66b5b468f0fbe.jpg
gazou14-e1419641000587-c1b30d7a0fbb9e59504dc1bc2aeea47b72bb54beabe69c9f3ae88c5f50c4fb8a.jpg
glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot
glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot.gz
glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg
glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg.gz
glyphicons-halflings-regular-a26394f7ede100ca118eff2eda08596275a9839b959c226e15439557a5a80742.woff
glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf
glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf.gz

試したこと

課題に対してアプローチしたことを記載してください
Rails4を本番環境にデプロイするまでのメモ
application.rbに以下を追加

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

Rails 4でBootstrap 3 (Glyphicon問題も解決)
config/application.rbに以下を追加

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


bootstrap.cssとbootstrap.min.cssの該当部分を書き換え

-「../fonts/glyphicons-halflings-regular.〜」
+「/assets/glyphicons-halflings-regular.〜」

config/environments./production.rb で以下のように書き換え、コメントアウトを外す

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

該当ファイルをバイナリーファイルとしてgitにあげるため、
application名 直下に .gitattributesファイルを作成し、以下を入力する

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

なお、これらの作業を行ったあとに、gitのクローンからやり直し、
unifornの再起動、bundle exec rake assets:clobberでassetsファイルの削除もしておりますが、
glyphiconが表示されないままの状況です。

補足情報(言語/FW/ツール等のバージョンなど)

rails'4.2.6' twitter-bootstrap-rails (3.2.2), bootstrap-material-design (= 0.1.4), bootstrap-sass (~> 3.0), bootstrap-sass (3.3.7)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

長時間嵌まってしまい、抜け出す方法も他に見つけられなかったため、bootstrap-gryphiconではなく、FontAwesomeのCDNを試してみたところ、こちらで問題なくアイコンが表示されるようになりました。

同じように嵌まってしまい、gryphiconにこだわりがなければ、FontAwesomeを試してみると良いと思います!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる