Impossible d'écraser la police de bootstrap-sass avec celle de font-awesome

Question

J'utilise bootstrap-sass et les gemmes font-awesome (https://github.com/littlebtc/font-awesome-sass-rails). Je voudrais remplacer le paramètre de police bootstrap de celui de font-awesome.

Depuis le site de font-awesome je peux remplacer les valeurs par défaut bootstrap, si je viens d'importer si après l'importation du bootstrap.

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

J'ai fait ce qui précède, mais la police de font-awesome ne surcharge pas. J'ai poussé mon projet sur github - https://github.com/murtaza52/rails-base. L'URL est accessible sur localhost: 3000/messages

Je vais apprécier si quelqu'un peut me aider remplaçant la police par défaut de circuits fermés avec ceux des années font-super

Answer 1

Modifier votre application.css.scss pour ressembler ci-dessous

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

... 

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

POURQUOI?

1. Vous déplacez import "font-awesome" en haut, puis définir baseFontFamily parce que ce bootstrap utilise pour définir font-family pour tous les éléments. Vérifiez Typography and links bloc au milieu. Si vous import bootstrap après cela, FontAwesome sera utilisé par défaut.
2. Vous devez supprimer la ligne import "scaffolds"; car scaffolds.css.scss réinitialisera votre famille de polices pour l'élément body qui sera hérité par tous les autres éléments.

Si vous ne pouvez pas éviter de l'importer avant le bootstrap. J'espère que ça aide.

Answer 2

Je ne sais pas si cela vous aide, mais au moins, parfois, quand le code du template semble valide, vous devez forcer rafraichir votre navigateur avec ctrl + shirt + r pour voir les changements (fonctionne au moins dans mozilla).

Answer 3

Pour ceux d'entre vous les gars en utilisant Bootstrap 3.2+ (je suppose), voici la liste des variables SASS vous pouvez modifier:

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

Dans notre cas, nous voulons nous assurer de définir $font-family-base avant faire @import "bootstrap".

En fixant $font-family-base avant la ligne ci-dessous est atteinte, Bootstrap utilise notre $font-family-base au lieu (sinon, la valeur par défaut $font-family-base-serif également définies dans ce qui précède variables.scss).

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

Voici comment mon application.css.sass ressemble

/* 
*= require_tree . 
*= require_self 
*/ 

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

Et je donne les résultats suivants en _fonts.css.sass (Vous ne devez pas avoir dans un fichier séparé)

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