图标未显示-Rails 4.2。3-引导3.3。5.

Question

我一直在使用Bootstrap3.3。5和轨道4.2。3几天来，我一直试图在我的应用程序中显示图标。我已经成功地启动了jQuery UI，并使用了引导datetimepicker gem，以便在选择日期时可以看到有用的日历。但是，我不知道如何使日历图标出现。

Glyphicons在应用程序/资产/字体/中处于松散状态。JavaScript

只需添加图标，我就完成了！任何帮助都太好了！

应用css

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

应用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

查看日期选择器

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

日期选择器工作。图标不会显示。

Answer 1

似乎和我预期的一样。

在Gemfile加载依赖项方面，存在重复的CSS JS文件，这些文件与资产文件夹中的相同文件直接耦合，并且存在一个应用程序。css以及应用程序。scss（应该只有一个，即scss版本）。

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

下面是repo:CSS文件中的样式表文件夹

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

这是repo:js文件中的js文件夹

应用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

这是一张现在情况的图片。（供应商/资产文件夹是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";

新应用程序。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

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

• rails g wice_网格：安装
• rails生成datetimepicker\u rails:安装

希望这能帮你解决一切。