Невозможно перезаписать шрифт bootstrap-sass шрифтом font-awesome

Я использую bootstrap-sass и потрясающий шрифт ( https://github.com/littlebtc/font-awesome-sass-rails) драгоценные камни. Я хотел бы переопределить настройку шрифта начальной загрузки из шрифта-awesome.

С сайта font-awesome я могу переопределить значения по умолчанию для бутстрапа, если я просто импортирую их после импорта бутстрапа.

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

Я сделал все вышеперечисленное, но шрифт font-awesome не имеет приоритета. Я отправил свой проект на github - https://github.com/murtaza52/rails-base . URL-адрес доступен на локальном хосте: 3000/posts

Я буду признателен, если кто-нибудь поможет мне переопределить шрифт по умолчанию bootstraps шрифтом font-awesome.


ruby-on-rails twitter-bootstrap sass font-awesome
person murtaza52    schedule 02.08.2012    source источник
comment
В каком порядке внешние таблицы стилей CSS отображаются на вашей веб-странице? (Просмотреть исходный код страницы для проверки.)   -  person Ari    schedule 02.08.2012
comment
Он компилирует все в один файл application.css. Внутри application.css они включаются в порядке начальной загрузки, а затем стили шрифта awesome.   -  person murtaza52    schedule 03.08.2012

Ответы (3)


arrow_upward
11
arrow_downward

Измените свой application.css.scss, чтобы он выглядел так, как показано ниже.

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

...

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

ПОЧЕМУ?

  1. Вы перемещаете import "font-awesome" вверху, а затем определяете baseFontFamily, потому что это то, что Bootstrap использует для определения font-family для всех элементов. Проверьте блок Типографика и ссылки посередине. Если вы import bootstrap после этого, FontAwesome будет использоваться по умолчанию.
  2. Вы должны удалить строку import "scaffolds";, потому что scaffolds.css.scss сбросит ваше семейство шрифтов для элемента body, которое будет унаследовано всеми остальными элементами.

Если вы не можете избежать его импорта перед загрузкой. Надеюсь, это поможет.

person Kulbir Saini    schedule 05.08.2012
comment
Это помогло мне заставить FontAwesome 4 (через гем font-awesome-rails) работать с bootstrap-sass-rails. Спасибо - person kbjerring; 24.10.2013

arrow_upward
1
arrow_downward

Для тех из вас, кто использует 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

person Abdo    schedule 01.08.2014

arrow_upward
0
arrow_downward

Я не знаю, поможет ли это вам, но, по крайней мере, иногда, когда код шаблона кажется правильным, вам нужно принудительно обновить браузер с помощью Ctrl + рубашка + r, чтобы увидеть изменения (работает, по крайней мере, в Mozilla).

person Mauno Vähä    schedule 02.08.2012