Impossibile sovrascrivere il carattere di bootstrap-sass con quello di font-awesome

Question

Sto usando le gemme bootstrap-sass e font-awesome (https://github.com/littlebtc/font-awesome-sass-rails). Vorrei sovrascrivere l'impostazione del carattere di bootstrap da quella di font-awesome.

Dal sito di font-awesome posso sovrascrivere i valori di default del bootstrap, se imparo solo se dopo l'importazione di bootstrap.

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

ho fatto sopra, ma di carattere del font-impressionante non è prevalente. Ho spinto il mio progetto su github - https://github.com/murtaza52/rails-base. L'url è accessibile su localhost: 3000/messaggi

Io apprezzo se qualcuno può aiutarmi sovrascrivendo font di default di bootstrap con quelli del font-impressionante di

Answer 1

Modificare la tua application.css.scss a guardare come di seguito

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

... 

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

PERCHE '?

1. si sposta import "font-awesome" in alto e quindi definire baseFontFamily perché è quello che bootstrap utilizza per definire font-family per tutti gli elementi. Controllare il blocco Typography and links nel mezzo. Se dopo questo è import bootstrap, per impostazione predefinita verrà utilizzato FontAwesome.
2. È necessario rimuovere la riga import "scaffolds"; perché scaffolds.css.scss ripristinerà la famiglia di font per l'elemento body che verrà ereditato da ogni altro elemento.

Se non è possibile evitare di importarlo prima del bootstrap. Spero che aiuti.

Answer 2

Non so se questo ti aiuta, ma almeno qualche volta, quando il codice del template sembra valido è necessario forzare l'aggiornamento del browser con ctrl + shirt + r per vedere i cambiamenti (funziona almeno in mozilla).

Answer 3

Per quelli di voi ragazzi che utilizzano Bootstrap 3.2+ (credo), ecco l'elenco delle variabili SASS è possibile modificare:

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

Nel nostro caso, vogliamo fare in modo di definire $font-family-base prima facendo @import "bootstrap".

Impostando $font-family-base prima riga sottostante viene raggiunto, Bootstrap usa nostra $font-family-base invece (altrimenti, esso imposta $font-family-base-serif, anche definiti nel variables.scss sopra).

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

Ecco come il mio application.css.sass assomiglia

/* 
*= require_tree . 
*= require_self 
*/ 

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

e ho il seguente in _fonts.css.sass (Non è necessario avere in un file separato)

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