Bootstrap,字体真棒不显示的图标,但图标旋转
问题描述:
嗨我使用Bootstrap来设计'网站维护'页面。Bootstrap,字体真棒不显示的图标,但图标旋转
我正在使用'Spinning Icon Font'来显示旋转齿轮。虽然这在我的本地XAMPP服务器上工作得很好,但是当我将它上载到在线服务器时,它并未显示。
应该是:
但它示出了作为
然而,在第二PIC 正在旋转所示的那些矩形框,但它没有显示齿轮。
我的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待见
答
“FONT-awesome.min.css” 正试图从加载字体:
这样:
- http://vikramrao.com/fonts/fontawesome-webfont.woff2
- http://vikramrao.com/fonts/fontawesome-webfont.woff
- http://vikramrao.com/fonts/fontawesome-webfont.ttf
不存在,它抛出404错误(未找到)
您应该创建该文件夹并上传该文件。
+1
非常感谢。这真的很快。它完美的作品。 –
我在看dev开发控制台抛出“fontawesome-webfont”源错误404。 –
我已经使用了fontawesome CDN,它工作的很好!问题是你的'/ css/font-awesome.min.css' –
可能重复[Font awesome只显示方框而不是图标](https://*.com/questions/26867795/font-awesome-showing-只是方块框而不是图标) – GGO