twitter-bootstrap - 通过 Bower 在 bootstrap sass 中包含 font-awesome

Question

我已经安装了bootstrap-sass-official和 font-awesome使用凉亭。我已经尝试了所有可能的组合，以使用 scss 在 Bootstrap 中包含 fontawesome。

最可能的解决方案是在我的应用程序的 main.scss 中指定提交以下文件:

$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';

并注释掉 @import "bootstrap/glyphicons";里面的主要 bootstrap.scss文件。

如果我启动我的 grunt serve在 http://localhost:9000/ (我正在使用来自默认 yeoman webapp 的 gruntfile)我可以看到我的应用正在运行。

我可以看到我的 main.css包含所有 fontawesome 类的文件，其中包含字体位置的引用 url ( ../bower_components/font-awesome/fonts/fontawesome-webfont.eot)。

一切似乎都很好，但每当我使用 FontAwesome 图标时，例如 <span class="fa-star"></span>我得到一个空的方框而不是图标。我错过了一些我看不到的东西......

Answer 1

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

它不会做任何事情。

为了使用 Font awesome，您需要在类前面加上 'fa' :

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