我正在使用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示例网站确实可以正确加载,因此我可以确定浏览器的选择不是问题。任何帮助,将不胜感激!

最佳答案

您安装了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)中引用的文件下载到您的服务器,并将其放在资产/字体下。

10-04 22:39
查看更多