2014-04-15 6 views
6

Ich habe 10 und font-awesome mit bower installiert. Ich habe alle möglichen Kombinationen ausprobiert, um die Fontawesome im Bootstrap mit scss einzubinden.Fügen Sie font-awesome in bootstrap sass über Bower

Die wahrscheinlichste Lösung ist die Angabe in main.scss Datei meiner App folgend:

$fa-font-path: "../bower_components/font-awesome/fonts"; 
@import "font-awesome/scss/font-awesome"; 
@import '../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss'; 

Und die @import "bootstrap/glyphicons"; innerhalb der Haupt bootstrap.scss Datei auszukommen.

Wenn ich meine grunt serve bei http://localhost:9000/ starte (ich benutze eine gruntfile von der Standard-yeoman-Webapp) kann ich meine App läuft sehen.

Ich kann meine main.css Datei mit allen fontawesome Klassen und im Innern der Referenz-URL zum Speicherort der Schriftart (../bower_components/font-awesome/fonts/fontawesome-webfont.eot) sehen.

Alles scheint in Ordnung, aber immer wenn ich ein FontAwesome Icon verwende, zum Beispiel <span class="fa-star"></span> bekomme ich eine leere quadratische Box anstelle des Icons. Ich vermisse etwas, was ich nicht sehen kann ...

+1

FA mit nicht funktionieren Sie Präfix haben mit fa: pbenard

+1

ernst? Ich nahm mich 24 Stunden, um meine Dummheit zu realisieren;) @TheLittlePig, wenn Sie Ihren Kommentar als Antwort schreiben Ich werde es akzeptieren – Leonardo

+0

Oder wir können die Frage löschen, weil vielleicht nichts mit Bower überhaupt zu tun hat – Leonardo

Antwort

2
<span class="fa-star"></span> 

Es wird nichts tun.

Um Font genial zu verwenden, müssen Sie die Klasse von 'fa' Präfix:

<span class="fa fa-star"></span> 
Verwandte Themen