Font Awesome与bootstrap 3无法正常工作

时间:2013-11-17 22:35:06

标签: css twitter-bootstrap fonts font-awesome

这是我的标题,我在主页上添加了字体真棒:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Custom Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.css" rel="stylesheet"
</head>

尝试添加

测试字体真棒
<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3
</a>

但结果是:没有任何字体令人敬畏的特定排版或图标。看起来字体真棒不会压抑引导代码。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:5)

我对以下示例没有任何问题,这个示例基本上是您发布的两个片段的组合。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Custom Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

  <!-- Bootstrap core CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>    

<body>
  <a class="btn btn-lg btn-success" href="#">
    <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3
  </a>
</body>
</html>

正如Michal所说,你的版本有一个Bootstrap样式表的开放链接标签。我做的唯一改变是从CDN加载Bootstrap(因为我没有方便的本地副本)。

但是,该示例甚至在链接标记未关闭时仍然有效,但这可能取决于所使用的浏览器。您是否在控制台中出现任何错误(例如缺少组件?)