Question

我正在使用Twitter Bootstrap并且在显示图标时遇到问题。我正在尝试重新创建其中一个示例：http://fortawesome.github.io/Font-Awesome/#examples

这是我的代码：

<head>
    <meta charset="utf-8"/>     
    <script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
</head>
<div class="control-group">
    <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
</div>

图标根本没有出现;我是否需要链接到任何图标图像文件或类似的东西？我在Firefox中测试，但Font-Awesome示例站点确实正确加载，所以我很确定浏览器选择不是问题。任何帮助将不胜感激！

Answer 1

你安装了Firebug吗？您应该在“网络”标签中检查404错误，从您的说明中我猜测您没有将字体文件放在服务器中的正确位置。

如果您查看font-awesome.css的前几行，您会看到以下定义：

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

确保将CSS中引用的文件（which you can find here）下载到您的服务器，并将其放在 assets / font 下。

Answer 2

确保将Font Awesome“font”文件夹复制到“assets”文件夹中。

Font Awesome 覆盖使用 ../ img / glyphicons-halflings.png

的Twitter bootstrap“图标”

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
   -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;
}

需要字体文件来呈现页面上的图标;）

Twitter Bootstrap - 使用图标

2 个答案: