css - Font Awesome with bootstrap 3 不工作

标签 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>

但结果是:没有字体很棒的特定排版或图标。看起来 font awesome 不会压制 Bootstrap 代码。谁能帮忙?

最佳答案

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

<!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(因为我手边没有本地副本)。

但是,该示例甚至在链接标记未关闭时也能正常工作,但这可能取决于所使用的浏览器。您是否在控制台中遇到任何错误(例如缺少组件?)

关于css - Font Awesome with bootstrap 3 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20037106/

相关文章:

html - Container Div 没有封装内容

css - 应用 WPF 样式,如 CSS 和 Html

twitter-bootstrap - 边框颜色和背景颜色在悬停时变得模糊

jquery - Bootstrap 3 选择选项切断

delphi - 在字体大小后更改弹出行高度

css - Bootstrap css 图像中心和导航栏与品牌内联折叠

html - CSS 覆盖 rgba 透明度

jquery - 显示没有模态框的 Bootstrap 3 灰色背景

html - 让这些点击功能在没有 jQuery 的情况下工作

css 背景附件和字体