CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapsassfont-awesome
murtaza52
murtaza52

Reputation: 47441

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

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

Upvotes: 8

Views: 7151

Answers (3)

Abdo
Abdo

Reputation: 14051

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

Upvotes: 1

Kulbir Saini
Kulbir Saini

Reputation: 3915

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.

Upvotes: 11

Mauno Vähä
Mauno Vähä

Reputation: 9788

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).

Upvotes: 0

Related Questions