Question

我正在使用bootstrap-sass和font-awesome（https://github.com/littlebtc/font-awesome-sass-rails）宝石。我想从font-awesome中覆盖bootstrap字体设置。

从font-awesome的网站我可以覆盖引导程序默认值，如果我只是在引导程序导入后导入。

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

我已经完成了上述操作，但font-awesome的字体没有覆盖。我把我的项目推到了github上 - https://github.com/murtaza52/rails-base。该网址可在localhost：3000 / posts

上访问

如果有人可以帮我翻译bootstraps的默认字体，那么我将不胜感激。使用font-awesome的

Answer 1

将您的application.css.scss修改为如下所示

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

...

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

<强> WHY吗

您将import "font-awesome"移到顶部，然后定义baseFontFamily，因为这是引导程序用于为所有元素定义font-family的内容。检查中间的Typography and links块。如果您在此之后import bootstrap，则默认会使用FontAwesome。
您应该删除import "scaffolds";行，因为scaffolds.css.scss将重置body元素的字体系列，该字符系列将由其他所有元素继承。

如果你无法避免在bootstrap之前导入它。我希望有所帮助。

Answer 2

对于那些使用Bootstrap 3.2+的人（我猜），这里是你可以修改的SASS变量列表：

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

在我们的案例中，我们希望在执行$font-family-base之前确定@import "bootstrap"。

通过在到达以下行之前设置$font-family-base，Bootstrap会使用我们的$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

Answer 3

我不知道这是否对您有所帮助，但至少有时当模板代码看似有效时，您需要使用ctrl + shirt + r强制刷新浏览器以查看更改（至少在mozilla中有效）。

无法用font-awesome覆盖bootstrap-sass的字体

3 个答案: