Không thể ghi đè phông chữ của bootstrap-sass bằng phông chữ tuyệt vời

Question

Tôi đang sử dụng đá quý bootstrap-sass và phông chữ tuyệt đẹp (https://github.com/littlebtc/font-awesome-sass-rails). Tôi muốn ghi đè lên các thiết lập font bootstrap từ đó font-awesome.

Từ trang web của font-awesome Tôi có thể ghi đè các giá trị mặc định của trình khởi động, nếu tôi chỉ nhập nếu sau khi quá trình nhập của bootstrap.

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

Tôi đã thực hiện ở trên, nhưng phông chữ của phông chữ tuyệt vời không ghi đè. Tôi đã đẩy dự án của tôi lên github - https://github.com/murtaza52/rails-base. Url có thể truy cập vào localhost: 3000/bài

tôi sẽ đánh giá cao nếu ai đó có thể giúp tôi trọng phông chữ mặc định bootstraps với những font-tuyệt vời của

Answer 1

Sửa đổi của bạn application.css.scss để trông giống như dưới đây

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

... 

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

TẠI SAO?

1. Bạn di chuyển import "font-awesome" ở phía trên và sau đó xác định baseFontFamily vì đó là những gì bootstrap sử dụng để xác định font-family cho tất cả các yếu tố. Kiểm tra Typography and links khối ở giữa. Nếu bạn import bootstrap sau này, FontAwesome sẽ được sử dụng theo mặc định.
2. Bạn nên xóa import "scaffolds"; dòng vì scaffolds.css.scss sẽ đặt lại gia đình phông chữ của bạn cho body yếu tố sẽ được thừa hưởng bởi mọi phần tử khác.

Nếu bạn không thể tránh nhập khẩu trước khi khởi động. Tôi hy vọng rằng sẽ giúp.

Answer 2

Tôi không biết nếu điều này giúp bạn nhưng ít nhất đôi khi mã mẫu có vẻ hợp lệ, bạn cần phải buộc làm mới trình duyệt của mình bằng ctrl + shirt + r để xem các thay đổi (hoạt động ít nhất trong mozilla).

Answer 3

Đối với những người bạn của chàng trai sử dụng Bootstrap 3.2+ (tôi đoán), đây là danh sách các biến Sass bạn có thể sửa đổi:

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

Trong trường hợp của chúng tôi, chúng tôi muốn chắc chắn để xác định $font-family-base trước đang thực hiện @import "bootstrap".

Bằng cách đặt $font-family-base trước dòng dưới đây được đạt tới, Bootstrap sử dụng $font-family-base của chúng tôi thay vì (nếu không, nó mặc định là $font-family-base-serif, cũng được định nghĩa trong variables.scss ở trên).

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

Đây là cách application.css.sass của tôi trông giống như

/* 
*= require_tree . 
*= require_self 
*/ 

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

Và tôi đã điều sau đây trong _fonts.css.sass (Bạn không cần phải có nó trong một file riêng biệt)

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