Ich benutze Bootstrap-Sass und die font-awesome ( Ссылка ) Edelsteine. Ich möchte die Bootstrap-Schriftart-Einstellung von der von Font-awesome überschreiben.
Von der Seite von font-awesome kann ich die Bootstrap-Standardeinstellungen überschreiben, wenn ich nur nach dem Import des Bootstraps importiere.
%Vor%Ich habe das oben beschriebene getan, aber font-awesome's font überschreibt nicht. Ich habe mein Projekt auf github - Ссылка verschoben. Die URL ist erreichbar unter localhost: 3000 / posts
Ich werde es begrüßen, wenn jemand mir helfen kann, die Standardschriftart von Bootstrap mit denen von font-awesome
zu überschreiben Ändern Sie Ihre application.css.scss wie folgt:
WARUM?
import "font-awesome" ganz oben und definieren dann baseFontFamily , da Bootstrap% ce_de% für alle Elemente definiert. Überprüfen Sie Typografie und Links in der Mitte. Wenn Sie font-family danach verwenden, wird import bootstrap standardmäßig verwendet. FontAwesome line entfernen, weil import "scaffolds"; Ihre Schriftfamilie für scaffolds.css.scss element zurücksetzt, die von jedem anderen Element übernommen wird. Wenn Sie nicht vermeiden können, es vor dem Bootstrap zu importieren. Ich hoffe, das hilft.
Für diejenigen von euch, die Bootstrap 3.2+ verwenden (ich schätze), hier ist die Liste der SASS-Variablen, die Sie ändern können:
In unserem Fall wollen wir sicherstellen, dass $font-family-base definiert wird, bevor @import "bootstrap" ausgeführt wird.
Wenn Sie $font-family-base vor Erreichen der darunter liegenden Zeile setzen, verwendet Bootstrap stattdessen unser $font-family-base (andernfalls wird standardmäßig $font-family-base-serif verwendet, das auch oben in variables.scss definiert ist).
$font-family-base: $font-family-sans-serif !default;
So sieht mein application.css.sass aus
%Vor% Und ich habe folgendes in _fonts.css.sass (Sie müssen es nicht in einer separaten Datei haben)
$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif
Ich weiß nicht, ob dir das hilft, aber zumindest manchmal, wenn Vorlagencode gültig zu sein scheint, musst du deinen Browser mit ctrl + shirt + r aktualisieren, um Änderungen zu sehen (funktioniert zumindest in Mozilla).
Tags und Links ruby-on-rails twitter-bootstrap sass font-awesome