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待見

來源

2017-10-13 Vikram Rao

我在看dev開發控制檯拋出「fontawesome-webfont」源錯誤404。 –

我已經使用了fontawesome CDN，它工作的很好！問題是你的'/ css/font-awesome.min.css' –

可能重複[Font awesome只顯示方框而不是圖標]（https://stackoverflow.com/questions/26867795/font-awesome-showing-只是方塊框而不是圖標） – GGO

「FONT-awesome.min.css」正試圖從加載字體：

http://vikramrao.com/fonts/

這樣：

不存在，它拋出404錯誤（未找到）

您應該創建該文件夾並上傳該文件。

來源

2017-10-13 07:44:14

非常感謝。這真的很快。它完美的作品。 –

我看到了您的代碼結構，發現您在樣式表中爲字體提供了不正確的路徑。看到我的屏幕捕獲

來源

2017-10-13 07:56:04

該問題已解決。不過謝謝你花時間詳細回覆。 –

有沒有票？因爲我看到有人投下了我的答案。 –

我很抱歉，但我沒有能力告訴你，誰投票給你。這需要更多的聲望點。 –

Bootstrap，字體真棒不顯示的圖標，但圖標旋轉

回答

相關問題