Question

在我的导航栏下拉列表中，当我将鼠标悬停在链接上时，图标（icon-group，icon-plus）也会显示另一个图标（图标过滤器）。这只发生在引导程序下拉菜单中。我在源文件中找不到任何正在应用的“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'

Application.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";

Answer 1

好的，你的问题是这个

 background-image: url(/assets/glyphicons-halflings-white-27ae535ced0dc82c64894d9 etc

当您将鼠标悬停在下拉列表/锚点标记（客户端和新客户端）上时，会调用上述内容，当您使用chrome的开发人员工具删除它时，问题就会消失。

您是否尝试在Firefox上查看自己的网站？它不会渲染css资产。看一看。这是github上的这个项目吗？我可以在源代码

中找到它

现在它不能用chrome渲染？同样的错误

第二个字体真棒图标显示悬停

1 个答案: