1

Hi I am using Bootstrap to design a 'Site Maintenance' page.

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.

Should be:

enter image description here

But it is showing as

enter image description here

However those rectangular frames shown in the second pic are spinning, but it is not showing the gears.

My 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

Vikram Rao
  • 1,068
  • 4
  • 24
  • 62
  • I'm looking at dev console at it throws an error 404 for "fontawesome-webfont" source. – Jordi Flores Oct 13 '17 at 07:42
  • I've used the fontawesome CDN and it's working fine! The problem is with your `/css/font-awesome.min.css` – Hamza Abdaoui Oct 13 '17 at 07:43
  • 1
    Possible duplicate of [Font awesome showing just square box instead icon](https://stackoverflow.com/questions/26867795/font-awesome-showing-just-square-box-instead-icon) – GGO Oct 13 '17 at 07:48

2 Answers2

1

"font-awesome.min.css" is trying to load fonts from:

http://vikramrao.com/fonts/

so:

Don't exists, it throws 404 error (not found)

You should create this folder and upload this files.

Jordi Flores
  • 2,080
  • 10
  • 16
0

I saw your code structure and found that you provided improper path for font in stylesheet. See my screen capture Screenshot

Ashok Dhaduk
  • 165
  • 2
  • 8