When using this with bootstrap-sass both FontAwesome & Glyphicon icons show up

[marcamillion]

I am using both this gem and bootstrap-sass gem.

When I do <i class="icon-arrow-up"></i> even though I can see the FontAwesome arrow, I can kinda see the glyphicon icon behind it too.

How do I get rid of the Glyphicons?

[marcamillion]

The only thing that seems to work, is in bootstrap_and_overrides.css.scss, I just set the path of the sprites to blank, like so:

$iconSpritePath: '';
$iconWhiteSpritePath: '';
@import 'bootstrap';

That got rid of the glyphicon images - but this seems like a hack.

Is there a better way to solve this issue?

FYI: Credit goes to @kiere that gave this solution here - https://github.com/thomas-mcdonald/bootstrap-sass/issues/204#issuecomment-8481282

[cabcookie]

There is another way. If I use bootstrap and font-awesome I need to import them in my CSS file. First, import bootstrap then font-awesome. And between them you set the opacity of i-elements:

@mixin transparency($value) {
opacity:$value/100;
filter:alpha(opacity=$value);
-moz-opacity:$value/100
}
@import "bootstrap";
@import "bootstrap-responsive";
i {
@include transparency(100);
}
@import "fontawesome";

This worked great for me. Remember that you shouldn't use =require _font-awesome in your application.css.

[marcamillion]

Why shouldn't I use =require _font-awesome in application.css?

It works perfectly, for me, right now.

This way seems like a lot more work and more complicated than it needs to be.

[zanedev]

+1 @marcamillion worked for me

[marcamillion]

@zanedev Glad it helped :)

[svyatov]

Just create something like my-bootstrap.css.scss and copy/paste there content of bootstrap/bootstrap.scss except @import "bootstrap/sprites";. You can also skip other things you don't use to make your css lighter.

After that @import "my-bootstrap"; in bootstrap_and_overrides.css.scss instead of @import "bootstrap";. And right after it @import "font-awesome";. Done.

So the my-bootstrap.css.scss should look like this (I stripped some components here):

// Core variables and mixins
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";

// CSS Reset
@import "bootstrap/reset";

// Grid system and page structure
@import "bootstrap/scaffolding";
@import "bootstrap/grid";
@import "bootstrap/layouts";

// Base CSS
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/forms";
@import "bootstrap/tables";

// Components: common
// here was @import "bootstrap/sprites"; comment it out or remove
@import "bootstrap/dropdowns";
@import "bootstrap/wells";
@import "bootstrap/component-animations";
@import "bootstrap/close";

// Components: Buttons & Alerts
@import "bootstrap/buttons";
@import "bootstrap/button-groups";
@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons

// Components: Nav
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/pagination";
@import "bootstrap/pager";

// Components: Misc
@import "bootstrap/labels-badges";

// Utility classes
@import "bootstrap/utilities"; // Has to be last to override when necessary

And bootstrap_and_overrides.css.scss should look like this:

@import "my-bootstrap";
@import "font-awesome";

This approach gives you more control over bootstrap components and solves all your problems with glyphicon.

[rmm5t]

@Svyatov Unless you really are skipping a lot of core bootstrap styles to make the resulting stylesheet smaller, that solution seems like a DRY violation.

I think the best solution is what @marcamillion originally found. It's also what I use with the font-awesome-rails gem.

$iconSpritePath: '';
$iconWhiteSpritePath: '';
@import 'bootstrap';
@import 'font-awesome';

Meanwhile, I vote to close this issue.