Nie można nadpisać czcionki bootstrap-sass z czcionką o niesamowitej jakości

Question

Używam klejnotów bootstrap-sass i font-awesome (https://github.com/littlebtc/font-awesome-sass-rails). Chciałbym zastąpić ustawienie czcionki początkowej z font-awesome.

Ze strony font-awesome mogę przesłonić domyślne ustawienia początkowe, jeśli po prostu zaimportuję po zaimportowaniu programu startowego.

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

Zrobiłem powyższe, ale czcionka font-awesome nie nadpisuje. Popchnąłem swój projekt na github - https://github.com/murtaza52/rails-base. URL jest dostępny na localhost: 3000/posty

będę wdzięczny, jeśli ktoś może mi pomóc nadrzędne domyślnej czcionki siłach męska z tymi font-niesamowite na

Answer 1

zmodyfikować application.css.scss wyglądać jak poniżej

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

... 

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

DLACZEGO?

1. przenieść import "font-awesome" na górze, a następnie określić baseFontFamily bo to właśnie bootstrap korzysta zdefiniować font-family dla wszystkich elementów. Sprawdź blok Typography and links na środku. Jeśli następnie zostanie użyta import bootstrap, zostanie użyta domyślnie opcja FontAwesome.
2. Należy usunąć linię import "scaffolds";, ponieważ scaffolds.css.scss zresetuje rodzinę czcionek dla elementu body, który będzie dziedziczony przez każdy inny element.

Jeśli nie można uniknąć importowania przed bootstrapem. Mam nadzieję że to pomogło.

Answer 2

ja nie wiem, czy to pomaga, ale przynajmniej czasami, kiedy kod szablonu wydaje się być poprawny, musisz wymusić odświeżenie przeglądarki za pomocą ctrl + shirt + r, aby zobaczyć zmiany (działa przynajmniej w mozilla).

Answer 3

Dla tych z Was, stosując Bootstrap 3.2 lub nowszym (chyba), oto lista zmiennych Sass można modyfikować:

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

W naszym przypadku, chcemy się upewnić, aby określić $font-family-base przed robi @import "bootstrap".

Ustawienie $font-family-base przed osiągnięciem poniżej linii, ładowania początkowego jest naszego $font-family-base zamiast (w przeciwnym wypadku odpowiada wartości $font-family-base-serif, również jak zdefiniowano w powyższym variables.scss).

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

To jest jak moja application.css.sass wygląda

/* 
*= require_tree . 
*= require_self 
*/ 

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

i mam następujący w _fonts.css.sass (Nie musisz mieć go w oddzielnym pliku)

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