Unable to overwrite bootstrap-sass's font with that of font-awesome

8
votes

I am using bootstrap-sass and the font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails) gems. I would like to override the bootstrap font setting from that of font-awesome.

From font-awesome's site I can override the bootstrap defaults, if I just import if after bootstrap's import. 

@import 'bootstrap';
@import 'font-awesome';

I have done the above, but font-awesome's font is not overriding. I have pushed my project on github - https://github.com/murtaza52/rails-base. The url is accessible on localhost:3000/posts

I will appreciate if someone can help me overriding bootstraps's default font with those of font-awesome's

3
ruby-on-railstwitter-bootstrapsassfont-awesome
What order do the external CSS stylesheets appear in for your web page? (View source for a page to check.) - Ari
Its compiling everything into a single application.css. Inside application.css they are included in the order of bootstrap and then font awesome styles. - murtaza52

3 Answers

11
votes

Modify your application.css.scss to look like below

@import "font-awesome";
$baseFontFamily: 'FontAwesome';
@import "bootstrap";

...

@import "bootstrap-responsive";
//@import "scaffolds";
@import "posts";

WHY?

  1. You move import "font-awesome" at the top and then define baseFontFamily because that's what bootstrap uses to define font-family for all the elements. Check Typography and links block in the middle. If you import bootstrap after this, FontAwesome will be used by default.
  2. You should remove import "scaffolds"; line because scaffolds.css.scss will reset your font family for body element which will be inherited by every other element.

If you can't avoid importing it before bootstrap. I hope that helps.

1
votes

For those of you guys using Bootstrap 3.2+ (I guess), here's the list of SASS variables you can modify:

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

In our case, we want to make sure to define $font-family-base before doing @import "bootstrap".

By setting $font-family-base before the line below is reached, Bootstrap uses our $font-family-base instead (otherwise, it defaults to $font-family-base-serif, also defined in the variables.scss above).

$font-family-base: $font-family-sans-serif !default;

This is how my application.css.sass looks like

/*
 *= require_tree .
 *= require_self
 */

@import "fonts"
@import "compass"
@import "bootstrap"

And I have the following in _fonts.css.sass (You don't have to have it in a separate file)

$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif

0
votes

I don't know if this helps you but at least sometimes when template code seems valid you need to force refresh your browser with ctrl+shirt+r to see changes (works at least in mozilla).