फ़ॉन्ट-भयानक

Question

के साथ बूटस्ट्रैप-एसएएस के फ़ॉन्ट को ओवरराइट करने में असमर्थ मैं बूटस्ट्रैप-एसएएस और फ़ॉन्ट-कमाल (https://github.com/littlebtc/font-awesome-sass-rails) रत्न का उपयोग कर रहा हूं। मैं फ़ॉन्ट-भयानक से बूटस्ट्रैप फ़ॉन्ट सेटिंग को ओवरराइड करना चाहता हूं।

फ़ॉन्ट-भयानक साइट से मैं बूटस्ट्रैप डिफ़ॉल्ट को ओवरराइड कर सकता हूं, अगर मैं बस बूटस्ट्रैप के आयात के बाद आयात करता हूं।

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

मैंने ऊपर किया है, लेकिन फ़ॉन्ट-कमाल का फ़ॉन्ट ओवरराइड नहीं कर रहा है। मैंने अपनी परियोजना को जिथब - https://github.com/murtaza52/rails-base पर धक्का दिया है। यूआरएल स्थानीय होस्ट पर पहुँचा जा सकता है: 3000/पदों

मैं अगर कोई मुझे उन लोगों के साथ बूटस्ट्रैप के डिफ़ॉल्ट फ़ॉन्ट अधिभावी मदद कर सकते हैं की सराहना करेंगे font-भयानक के

Answer 1

अपने application.css.scss की तरह नीचे

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

... 

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

देखने के लिए संशोधित क्यों?

1. आप शीर्ष पर ले जाने के import "font-awesome" और फिर baseFontFamily परिभाषित क्योंकि है कि क्या बूटस्ट्रैप सभी तत्वों के लिए font-family परिभाषित करने के लिए उपयोग करता है। बीच में Typography and links ब्लॉक देखें। यदि आप import bootstrap इसके बाद, FontAwesome डिफ़ॉल्ट रूप से उपयोग किया जाएगा।
2. आपको import "scaffolds"; लाइन को हटा देना चाहिए क्योंकि scaffolds.css.scss आपके फ़ॉन्ट परिवार को body तत्व के लिए रीसेट कर देगा जो हर दूसरे तत्व द्वारा विरासत में प्राप्त होगा।

यदि आप बूटस्ट्रैप से पहले इसे आयात करने से नहीं बच सकते हैं। मुझे आशा है कि वह मदद करेंगे।

Answer 2

यदि यह आप में मदद करता है लेकिन कम से कम कभी कभी जब मैं नहीं जानता टेम्पलेट कोड मान्य लगता है आपको बदलाव देखने के लिए ctrl + shirt + r के साथ अपने ब्राउज़र को रीफ्रेश करने की आवश्यकता है (कम से कम मोज़िला में काम करता है)।

Answer 3

बूटस्ट्रैप 3.2+ (मुझे लगता है) का उपयोग कर आप लोगों के उन लोगों के लिए, यहाँ एस.ए.एस.एस. चर की सूची आप संशोधित कर सकते है:

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

हमारे मामले में, हम पहले $font-family-base परिभाषित करने के लिए यह सुनिश्चित करना चाहते @import "bootstrap" कर रहा है।

$font-family-base सेट करने से पहले नीचे लाइन तक पहुँच गया है, बूटस्ट्रैप हमारे $font-family-base (अन्यथा, यह $font-family-base-serif को चूक, यह भी ऊपर variables.scss में परिभाषित) का उपयोग करता है के बजाय।

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

यह कैसे मेरे application.css.sass

/* 
*= require_tree . 
*= require_self 
*/ 

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

की तरह लग रहा है और मैं _fonts.css.sass में निम्नलिखित हैं (आप एक अलग फाइल में यह राशि की जरूरत नहीं है)

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