css - 字体真棒黑色矩形

Question

试图将 font awesome 实现到 web 项目中，但输出是一个 1px 实心边框矩形。我将 Sass 与 Codekit 一起使用，并相应地检查了我的路径。见下文

1. main.scss

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

2.变量.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 类，因此实际上并未使用 font-awesome 字体，而是使用了其他字体。像这样做：

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