Bootstrap，Font Awesome 不显示图标但图标在旋转

Question

Hi I am using Bootstrap to design a 'Site Maintenance' page.嗨，我正在使用 Bootstrap 设计一个“站点维护”页面。

I am using the 'Spinning Icon Font' to display the spinning gears.我正在使用“旋转图标字体”来显示旋转齿轮。 While this works very fine on my local XAMPP server, it is not showing when I upload it to online server.虽然这在我的本地 XAMPP 服务器上工作得很好，但当我将它上传到在线服务器时它没有显示。

Should be:应该：

But it is showing as但它显示为

However those rectangular frames shown in the second pic are spinning , but it is not showing the gears.然而，第二张图片中显示的那些矩形框正在旋转，但没有显示齿轮。

My index.html我的 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>

Where am I doing wrong?我哪里做错了？

Live example can be see at http://vikramrao.com现场示例可以在http://vikramrao.com上看到

Answer 1

"font-awesome.min.css" is trying to load fonts from: “font-awesome.min.css”正在尝试从以下位置加载字体：

http://vikramrao.com/fonts/ http://vikramrao.com/fonts/

so:所以：

Don't exists, it throws 404 error (not found)不存在，它会抛出 404 错误（未找到）

You should create this folder and upload this files.您应该创建此文件夹并上传这些文件。

Answer 2

I saw your code structure and found that you provided improper path for font in stylesheet.我看到了你的代码结构，发现你在样式表中为字体提供了不正确的路径。 See my screen capture查看我的屏幕截图

Bootstrap，Font Awesome 不显示图标但图标在旋转

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-10-13 07:44:14

解决方案2
0 2017-10-13 07:56:04

Bootstrap，Font Awesome 不显示图标但图标在旋转

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-10-13 07:44:14

解决方案2 0 2017-10-13 07:56:04

解决方案1
1 已采纳 2017-10-13 07:44:14

解决方案2
0 2017-10-13 07:56:04