Question

我一直在与Bootstrap 3.3.5和Rails 4.2.3斗争几天，试图在我的应用程序中显示Glyphicons。我已经设法让jQuery-UI继续使用bootstrap-datetimepicker gem，所以我在选择日期时可以看到一个有用的日历。但是我无法弄清楚如何显示日历图标。

Glyphicons坐在app / assets / fonts /中。 JavaScript＆amp; JQuery-UI似乎工作正常，因为当您以移动形式查看时，应用程序导航栏会响应。 datetimepicker有效。

只需要添加的图标，我就完成了！任何帮助都会很精彩！

Application.css

 *= require jquery-ui
 *= require_self
 *= require_tree .
 */
body {
   padding-top: 60px;
}

的application.js

 //= require jquery
 //= require jquery-ui
 //= require jquery_ujs
 //= require moment
 //= require bootstrap-sprockets
 //= require bootstrap-datetimepicker
 //= require pickers
 //= require wice_grid
 //= require turbolinks
 //= require_tree .

宝石文件

source 'https://rubygems.org'
gem 'rails', '4.2.3'
gem 'sqlite3'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'sass-rails'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'font-awesome-sass'
gem 'jquery'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'momentjs-rails', '~> 2.9'
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
gem 'devise'
gem 'simple_form'
gem 'cancancan'
gem 'wice_grid'
gem 'kaminari'
gem 'sdoc', '~> 0.4.0', group: :doc

# gem 'bcrypt', '~> 3.1.7'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

视图中的Datepicker

<%= f.input :risk_assessment_date, :as => :date_picker %>

日期选择器有效。图标没有。

Answer 1

似乎按照我的预期工作。

有关于你的Gemfile加载依赖项的重复CSS + JS文件，以及你的assets文件夹中直接相同的文件，还有一个application.css和一个application.scss（应该只有一个，SCSS版本））。

您可以清除所有这些并只使用Gemfile访问所有内容，您不需要自己在应用程序中放置任何供应商文件。

以下是repo：CSS Files

中的样式表文件夹

application.css 
application.scss    
bootstrap.css   
bootstrap.css.map   
wice_grid.css   
wice_grid.css.map   
wice_grid.scss

这是repo：JS Files

中的js文件夹

的application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require wice_grid.js
//= require_tree .

Plus this Bootstrap file
bootstrap.js

这是现在看起来如何的形象。（vendor / assets文件夹是生成的Rails，您不需要自己放置它们。）

以下是我做/改变的内容：

新 application.scss （*仅限CSS的应用程序文件）。所有自定义CSS现在都位于名为 bootstrap-custom.scss 的文件中（参见图片）。

@import "jquery-ui";
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap-custom';
@import 'bootstrap-datetimepicker';
@import "wice_grid";
@import "font-awesome-sprockets";
@import "font-awesome";

新 application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require wice_grid
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require turbolinks
//= require_tree .

新 Gemfile （如果任何版本需要不同，您可以更改它，不应影响任何内容）

source 'https://rubygems.org'

gem 'rails', '4.2.3'
gem 'sqlite3'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'jquery'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'momentjs-rails', '~> 2.9'
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
gem 'devise'
gem 'simple_form'
gem 'cancancan'
gem "wice_grid", '3.6.0.pre4'
gem 'kaminari'
gem 'sdoc', '~> 0.4.0', group: :doc
gem "autoprefixer-rails"

# gem 'bcrypt', '~> 3.1.7'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

确保运行以下内容（在更改所有内容后再次运行），因为您将收到无法找到这些文件的错误：

希望这能为你解决所有问题。

Glyphicons没有显示 - Rails 4.2.3 - Bootstrap 3.3.5

1 个答案: