首页 文章

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

提问于
浏览 次
8

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

从font-awesome的站点我可以覆盖bootstrap默认值，如果我只是在bootstrap导入后导入 .

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

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

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

ruby-on-rails twitter-bootstrap sass font-awesome

3 回答

  • 0

    将 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之前导入它 . 我希望有所帮助 .

    回复于
  • 1

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

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

    在我们的例子中，我们要确保在执行 @import "bootstrap" 之前定义 $font-family-base .

    通过在达到以下行之前设置 $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

    回复于
  • 11

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

    回复于

相关问题