Question

I’m using compass and bootstrap for sass on a project. Everything works well. The only thing I can’t figure out is how to resize the icon glyphs.

For example, when bootstrap is running on its default less configuration I can simply increase the icon size by adding a font-size css method to the parent element. It was working well, but when I switched to bootstrap for sass the icon lost its color and its font-size.

Any ideas what could have gone wrong? Boostrap is imported properly in my application.css.sass file.

@import jquery.ui.all
@import variables.css.scss
@import bootstrap
@import sass-rules.css.scss
@import fonts.css.scss
@import general.css.scss
@import containers.css.scss
@import jquery.Jcrop.min
@import header.css.scss
@import side_bar.css.scss
@import modal.css.scss
@import home.css.scss
@import users.css.scss
@import items.css.scss
@import messages.css.scss
@import notifications.css.scss
@import me.css.scss
@import friends.css.scss
@import discover.css.scss

Update

Gemfile Assets

group :assets do
  gem 'sass-rails', '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'


  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platform => :ruby
  gem 'twitter-bootstrap-rails'
  gem 'bootstrap-sass', '~> 2.1.0.0'

  gem 'uglifier', '>= 1.0.3'

end
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'compass'

Using this bootstrap for sass gem. I’m not using any mixins for the icons.

Answer 1

I’m not seeing anything in that project suggests it is using something like FontAwesome. The only icons I see are from a sprite map, and obviously those are not resizable. FontAwesome does provide a Sass file with all of the icons in it:

https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss