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