Home/ Questions/Q 8952981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T13:59:41+00:00

In my navbar dropdown, when I hover over the links, the icons (icon-group, icon-plus)

  • 0

In my navbar dropdown, when I hover over the links, the icons (icon-group, icon-plus) also have another icon (icon-filter) show up. This only happens on the bootstrap down down menu. I can’t find any reference in the source file to the “icon-filter” class being applied.

You can view the incorrect icons in the dropdown at the link below.
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;
}

Navigation dropdown

<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";
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok your problem is this

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

    When you hover over the dropdowns/anchor tags (so client and new client) the above is being invoked, when you remove it using chrome’s developer tools for example the problem disappears.

    Have you tried viewing your site on firefox? it is not rendering the css assets. take a look. is this project on github? I could prob find it then in the source code

    and now its not rendering in chrome? same error

    • 0