8

私はbootstrap-sassとfont-awesome（https://github.com/littlebtc/font-awesome-sass-rails）gemを使用しています。ブートストラップフォント設定をfont-awesomeの設定から上書きしたいと思います。

font-awesomeのサイトから、ブートストラップのインポート後にインポートするだけで、ブートストラップのデフォルトをオーバーライドできます。

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

私は上記を実行しましたが、font-awesomeのフォントはオーバーライドされていません。プロジェクトをgithubにプッシュしました-https ://github.com/murtaza52/rails-base。URLはlocalhost：3000/postsからアクセスできます

誰かがブートストラップのデフォルトフォントをfont-awesomeのデフォルトフォントでオーバーライドするのを手伝ってくれたら幸いです

4

3 に答える 3

11

application.css.scss以下のように変更します

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

...

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

なぜ？

  1. import "font-awesome"一番上に移動してから定義します。これは、ブートストラップがすべての要素baseFontFamilyを定義するために使用するためです。中央のタイポグラフィとリンクブロックをfont-family確認してください。この後、デフォルトで使用されます。import bootstrapFontAwesome
  2. 他のすべての要素に継承される要素のフォントファミリがリセットされるimport "scaffolds";ため、行を削除する必要があります。scaffolds.css.scssbody

ブートストラップの前にインポートすることを避けられない場合。それがお役に立てば幸いです。

于 2012-08-05T12:40:33.963 に答える
1

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

于 2014-08-01T12:03:48.890 に答える
0

これが役立つかどうかはわかりませんが、少なくともテンプレートコードが有効であると思われる場合は、変更を確認するためにctrl + shirt + rでブラウザを強制的に更新する必要があります（少なくともmozillaでは機能します）。

于 2012-08-02T20:57:23.930 に答える