ナビゲーション バーのドロップダウンで、リンクにカーソルを合わせると、アイコン (アイコン グループ、アイコン プラス) にも別のアイコン (アイコン フィルター) が表示されます。これは、ブートストラップのダウン メニューでのみ発生します。ソース ファイルに、適用されている「icon-filter」クラスへの参照が見つかりません。
下のリンクのドロップダウンで、間違ったアイコンを表示できます。
http://agile-ocean-8233.herokuapp.com/
Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.9'
gem 'sqlite3', :group => :development
gem 'pg', :group => :production
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'font-awesome-rails'
end
gem 'jquery-rails'
gem "rspec-rails", ">= 2.11.4", :group => [:development, :test]
gem "email_spec", ">= 1.2.1", :group => :test
gem "cucumber-rails", ">= 1.3.0", :group => :test, :require => false
gem "database_cleaner", ">= 0.9.1", :group => :test
gem "launchy", ">= 2.1.2", :group => :test
gem "capybara", ">= 1.1.2", :group => :test
gem "factory_girl_rails", ">= 4.1.0", :group => [:development, :test]
gem "bootstrap-sass", ">= 2.1.0.1"
gem "devise", ">= 2.1.2"
gem "cancan", ">= 1.6.8"
gem "rolify", ">= 3.2.0"
gem "simple_form", ">= 2.0.4"
gem "stripe", ">= 1.7.4"
gem "stripe_event", ">= 0.4.0"
gem "quiet_assets", ">= 1.0.1", :group => :development
gem "letter_opener", :group => :development
gem 'will_paginate', '~> 3.0'
gem 'will_paginate-bootstrap'
gem 'turbolinks'
gem 'thin'
gem 'jquery-turbolinks'
アプリケーション.css.scss
*= require_self
*= require 'font-awesome'
*= require_tree .
*/
.content {
background-color: #eee;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
[class^="icon-"], [class*=" icon-"] {
background-image: none;
}
ナビゲーション ドロップダウン
<li class="dropdown" id="client_menu">
<a class="dropdown-toggle" data-toggle="dropdown" href='#'>
Clients <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to 'Clients <i class="icon-group"></i>'.html_safe, clients_path %></li>
<li><%= link_to 'New Client <i class="icon-plus"></i>'.html_safe, new_client_path %></li>
</ul>
</li>
Bootstrap_and_overrides.css.scss
@import "bootstrap";
@import 'font-awesome';
body { padding-top: 60px; }
@import "bootstrap-responsive";