Flat-uiの適応方法を教えてください
自分で調べて色々試しましたが、フォントの適応とアイコンの適応がうまくいきません
現状はFlat-uiの各ファイルをそれぞれ下記フォルダに格納しています。
app/assets/javascripts
app/assets/stylesheets
app/assets/fonts
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
こんにちは。
gemを使用しないという方法をご希望のようですが、gemをインストールさせるだけでは表示できません。
以下の手順が必要になります。
まず下記のサイトの通りの手順でサンプルを作成していきます。
http://www.absolute-keitarou.net/blog/?p=141
① Gemfileに以下を加えて
gem 'flatui-rails'
② バンドラをはしらせます
bundle install
③ app/assets/stylesheets/application.cssに以下を追加
*= require flat-ui
④ app/assets/javascripts/application.jsに以下を追加
//= require flat-ui
1. Flat-UI-master/dist/cssの中身(vendorフォルダ、flat-ui.css, flat-ui.css.map, flat-ui.min.css)をflatui-rail/vendor/assets/stylesheetsの下に配置。
2. Flat-UI-master/dist/jsの中身(vendorフォルダ、flat-ui.js, flat-ui.min.js)をvendor/assets/javascriptsの下に配置。
3. Flat-UI-master/distの下のfontsフォルダとimgフォルダをvendor/assetsの下に配置。
⑥次にapp/config/application.rbの class Application < Rails::Application~endの間に以下を追加
config.assets.paths << "#{Rails}/vendor/assets/fonts"
⑦ここで適当にscaffoldを作成します。
rails g scaffold User name:string
rake db:migrate
⑧一度動作確認
http://localhost:3000/users/
この時点でflat-uiスタイルが適応されていると思います。
⑨ではいよいよアイコンを表示させる手順です。
vendor/assets/stylesheets/flat-ui.cssの「@font-face」と書いてある箇所のurlを修正。
1.フォント
url('../fonts/lato/....')
と書いている部分の「../fonts/lato/」を「../assets/lato/」にすべて修正。
2.アイコン
url('../fonts/glyphicons/....')
と書いている部分の「../fonts/glyphicons/」を「../assets/glyphicons/」にすべて修正。
*修正箇所が多数あって面倒ですが、頑張ってください。
⑩コンソールより「rake assets:precompile RAILS_ENV=development」を実行
⑪ためしにアイコン表示
app/views/blogs/index.html.erbに以下を追加
<span class="fui-info-circle"></span>
⑫rails sで確認
どうでしょうか??
投稿2014/12/16 06:07
退会済みユーザー
総合スコア0
0
投稿2014/12/15 08:57
総合スコア2321
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2014/12/15 10:57
2014/12/15 13:42
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2014/12/16 08:27
退会済みユーザー
2014/12/17 05:25
退会済みユーザー
2014/12/18 03:22
退会済みユーザー
2014/12/22 08:37
退会済みユーザー
2014/12/23 01:07