字体真棒黑色矩形

Question

尝试将字体awesome实现到Web项目中，但输出是1px实心边框矩形。我正在使用Sass和Codekit，我已经相应地检查了我的路径。见下文

1。 main.scss

 @import 'base/font-awesome/font-awesome.scss';

2。 variables.scss

$fa-font-path: "../font-awesome/fonts" !default;

第3。文件夹结构

4。 Main.css输出

@font-face {
  font-family: 'FontAwesome';
  src: url("font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0");
  src: url("font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"),  
  url("font-awesome/fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"),
  url("font-awesome/fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), 
  url("font-awesome/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; 
}

5。 HTML

 <i class="fa-twitter"></i>

我做错了什么？我已经检查了文档并查看了stackoverflow上的其他解决方案，但它似乎没有工作。感谢

Answer 1

你缺少fa类，所以字体真棒字体实际上并没有被使用，而是其他字体。这样做：

<i class="fa fa-twitter"></i>