2017-07-15 69 views
1

我在發現coreUI。無法顯示帶有coreUi的圖標

我試圖創建這個的login.html在GitHub上找到: https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-login.html

一切都很正常,但不能顯示用戶圖標和鎖定圖標。相反,我得到他們兩個的默認圖標。

我正在一個名爲coreUI包含文件夾:

  • 的login.html

  • css文件夾(包含style.css文件和簡單線icons.css無論是從混帳回購)

  • bower_components文件夾(包含jquery的,bootstarp和繫繩)

所以路徑應該是正確的。

此外,當我檢查瀏覽器中的元素時,我可以在css規則選項卡中看到鎖定圖標和用戶圖標的內容\e08e\e005。 但他們正在顯示相同的默認圖標。任何幫助,將不勝感激。

我也試了一下register.html; https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-register.html但同樣的問題。所有圖標顯示默認。

這是我的login.html

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="description" content="..."> 
    <meta name="author" content="...."> 
    <meta name="keyword" content="...."> 

    <!-- FavIcon link--> 
    <link rel="shortcut icon" href="../favicon.png"> 
    <!-- Icons --> 
    <link href="css/simple-line-icons.css" rel="stylesheet"> 


    <link href="css/style.css" rel="stylesheet"> 

    <title>Login</title> 



</head> 

<body class="app flex-row align-items-center"> 
    <div class="container"> 
     <div class="row justify-content-center"> 
      <div class="col-md-8"> 
       <div class="card-group mb-0"> 
        <div class="card p-4"> 
         <div class="card-block"> 
          <h1>Sign In</h1> 
          <p class="text-muted">Sign In to your account</p> 
          <div class="input-group mb-3"> 
           <span class="input-group-addon"><i class="icon-user"></i> 
           </span> 
           <input type="text" class="form-control" placeholder="Username"> 
          </div> 
          <div class="input-group mb-4"> 
           <span class="input-group-addon"><i class="icon-lock"></i> 
           </span> 
           <input type="password" class="form-control" placeholder="Password"> 
          </div> 
          <div class="row"> 
           <div class="col-6"> 
            <button type="button" class="btn btn-primary px-4">Login</button> 
           </div> 
           <div class="col-6 text-right"> 
            <button type="button" class="btn btn-link px-0">Forgot password?</button> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%"> 
         <div class="card-block text-center"> 
          <div> 
           <h2>Sign up</h2> 
           <p>Site description....</p> 
           <button type="button" class="btn btn-primary active mt-3">Register</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 


<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/tether/dist/js/tether.min.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

</body> 

</html> 

回答

0

我想你還沒有加入任何字體文件夾或字體的字體目錄。

SO創建文件夾字體添加簡單圖標的字體文件。如果您已經有字體文件夾,請在此文件夾中添加字體。 enter image description here

+0

您已使用「simple-line-icons.css」文件來呈現字體。它只會在字體文件夾中添加所有字體的字體。因爲用戶圖標和鎖定圖標。圖標是從simple-line-icons.css文件中呈現的特殊字體 – mybestpatron