Bootstrap 3 的 Font Awesome 无法正常工作答案

【问题标题】：Font Awesome with bootstrap 3 not workingBootstrap 3 的 Font Awesome 无法正常工作
【发布时间】：2013-11-30 23:20:48
【问题描述】：

这是我的标题，我在主页上添加了很棒的字体：

<!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>

但结果是：没有一个字体很棒的特定排版或图标。看起来很棒的字体不会抑制引导代码。有人可以帮忙吗？

【问题讨论】：

您的引导链接已损坏。你能提供一个小提琴来重现这个问题吗？你得到什么输出？

标签： css twitter-bootstrap fonts font-awesome

【解决方案1】：

下面这个例子我没有任何问题，基本上是你贴的两个sn-ps的组合。

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

但是，即使链接标签未关闭，该示例也可以正常工作，但这可能取决于所使用的浏览器。您是否在控制台中遇到任何错误（例如缺少组件？）

【讨论】：

是的，您的代码运行良好。谢谢。我会建议那些刚来这个帖子的人阅读 fas fa-ICON NAME 中的“s”，让它成为 fa fa-ICON NAME。我决定说明这一点，因为虽然上面的代码对我有用，但仅仅是因为我没有删除 fas 中的 's'，我无法加载字体，但字体图像损坏。
另外，如果你从网站上复制了之类的任何代码。请删除最后的 b。这是 bootstrap 3 我现在真的不知道其他版本。
Font Awesome v5 将基类从 fa 更改为 far（常规）、fas（实心）和 fab（品牌）。专业版甚至还有更多。