CODEWITHSUNDEEP
htmltwitter-bootstrapfont-awesome
Vikram Rao
Vikram Rao

Reputation: 1078

Bootstrap, Font awesome not showing the icons but the icon is spinning

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

Upvotes: 1

Views: 2762

Answers (2)

Ashok Dhaduk
Ashok Dhaduk

Reputation: 290

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

Upvotes: 0

Jordi Flores
Jordi Flores

Reputation: 2150

"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.

Upvotes: 1

Related Questions