Bootstrap，字体真棒不显示图标，但图标正在旋转答案

【问题标题】：Bootstrap, Font awesome not showing the icons but the icon is spinningBootstrap，字体真棒不显示图标，但图标正在旋转
【发布时间】：2017-10-13 07:37:57
【问题描述】：

您好，我正在使用 Bootstrap 设计一个“站点维护”页面。

我正在使用“旋转图标字体”来显示旋转齿轮。虽然这在我的本地 XAMPP 服务器上运行良好，但当我将其上传到在线服务器时它没有显示。

应该是：

但它显示为

但是第二张图片中显示的那些矩形框在旋转，但没有显示齿轮。

我的 index.html

<!DOCTYPE html>
<head>

  <title>Maintenance</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:400,300,700">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="/css/font-awesome.min.css">

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

  <!-- App CSS -->
  <link rel="stylesheet" href="/css/admin.css">

</head>

<body class="">

<div class="maintenance-wrapper">

  <div class="maintenance">

    <div class="maintenance-icon">
      <i class="fa fa-cog fa-spin gear-1"></i>
      <i class="fa fa-cog fa-spin gear-2 text-primary"></i>
      <i class="fa fa-cog fa-spin gear-3 text-secondary"></i>
    </div>  <!-- /.The Spinning-icons -->

    <h1 class="maintenance-title">Site Maintenance</h1>

</body>
</html>

我哪里做错了？

现场示例可以在http://vikramrao.com查看

【问题讨论】：

我正在查看开发控制台，它为“fontawesome-webfont”源抛出错误 404。
我使用了 fontawesome CDN，它运行良好！问题在于您的/css/font-awesome.min.css
Font awesome showing just square box instead icon的可能重复

标签： html twitter-bootstrap font-awesome

【解决方案1】：

“font-awesome.min.css”正在尝试从以下位置加载字体：

http://vikramrao.com/fonts/

所以：

不存在，它会抛出 404 错误（未找到）

您应该创建此文件夹并上传此文件。

【讨论】：

【解决方案2】：

我查看了您的代码结构，发现您在样式表中为字体提供了不正确的路径。查看我的屏幕截图

【讨论】：

问题已经解决。不过感谢您抽出宝贵时间详细回复。
有人投票吗？因为我看到有人对我的回答投了反对票。
很抱歉，但我无法告诉您谁投票给您。这需要更多的声望点。