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

时间:2014-04-15 11:08:03

标签: twitter-bootstrap font-awesome

我已经使用bower安装了bootstrap-sass-officialfont-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),我可以看到我的应用正在运行。

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

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

1 个答案:

答案 0 :(得分:2)

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

它什么都不做。

为了使用Font awesome,你需要在'fa':

前面加上类
<span class="fa fa-star"></span>