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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4822閲覧

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

yukkys

総合スコア42

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/26 17:14

###前提・実現したいこと
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)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

投稿2017/07/27 09:39

yukkys

総合スコア42

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問