字体真棒黑色矩形答案

【问题标题】：Font awesome black rectangle字体真棒黑色矩形
【发布时间】：2015-01-05 22:42:14
【问题描述】：

尝试在 Web 项目中实现 font awesome，但输出是一个 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 上的其他解决方案，但它似乎不起作用。谢谢

【问题讨论】：

你能发布 HTML 吗？
您使用什么浏览器/版本进行测试？
刚刚添加。够好吗？

标签： css sass font-awesome codekit

【解决方案1】：

您缺少 fa 类，因此实际使用的不是字体真棒字体而是其他字体。这样做：

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

【讨论】：

哇，我错过了那个小细节。谢谢
忘了说，你看到的方块是因为字符代码没有字体之外的字符表示。许多字体都是这样工作的，他们设置了一个 css 类来设置字体名称，所以要注意其他类似的字体。