2017-06-14 33 views
0

我使用CakePhp 3.4.7和Bootstrap 3.3.7並且Bootstrap工作正常,但Glyphicons沒有顯示。這裏是我的登錄頁面的樣子,你可以看到圖標丟失:http://i.imgur.com/wTAZEyO.jpgBootphrap Glyphicons沒有在Cakephp中顯示

我把所有glyphicons-halflings-regular。*字體放在App/webroot/font目錄和bootsrap.min.css中/ webroot/css和bootsrap.min.js/jquery-3.2.1.min.js在App/webroot/js

並檢查我的網站我可以看到css和js文件都被正確拉出,實際上代碼工作:http://i.imgur.com/mFO3HWhh.jpg

這裏是我的代碼

DEFAULT CTP HEAD

<!DOCTYPE html> 
<html> 
<head> 
<?= $this->Html->charset() ?> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title> 
    <?= $cakeDescription ?>: 
    <?= $this->fetch('title') ?> 
</title> 
<?= $this->Html->meta('icon') ?> 

<?= $this->Html->css('bootstrap.min.css') ?> 
<?= $this->Html->script('jquery-3.2.1.min.js') ?> 
<?= $this->Html->script('bootstrap.min.js') ?> 

<?= $this->fetch('meta') ?> 
<?= $this->fetch('css') ?> 
<?= $this->fetch('script') ?> 
</head> 

LOGINT CTP

<? 
// Path File: \App\src\Templates\Usuarios\login.ctp 
/** @var $this \Cake\View\View */ 
?> 
<div class="container alto-minimo-contenido"> 
    <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       <div class="panel-title"><i class="glyphicon glyphicon-user"></i> &nbsp;Formulario de ingreso al sistema</div> 
      </div> 
      <div style="padding-top:30px" class="panel-body"> 
       <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> 
       <?= $this->Flash->render('auth') ?> 
       <form id="loginform" class="form-horizontal" role="form" method="post" action="<?php echo $this->Url->build(["controller" => "Usuarios", "action" => "login"]) ?>"> 
        <label for="login-username">E-Mail</label> 
        <div style="margin-bottom: 25px" class="input-group"> 
         <span class="input-group-addon">@</span> 
         <input id="login-username" type="text" class="form-control" name="email" value="" placeholder="E-Mail"> 
        </div> 
        <label for="login-password">Clave</label> 
        <div style="margin-bottom: 25px" class="input-group"> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
         <input id="login-password" type="password" class="form-control" name="password" placeholder="Clave"> 
        </div> 
        <div style="margin-top:10px" class="form-group"> 
         <div class="col-sm-push-1 col-sm-10 col-sm-pull-1 controls"> 
          <button type="submit" id="btn-login" class="btn btn-primary btn-block"><i class="glyphicon glyphicon-log-in"></i> ENTRAR</button> 
         </div> 
        </div> 
       </form> 

      </div> 
     </div> 
    </div> 
</div> 

我可以看到,在我的bootstrap.min.css文件的路徑是正確的。任何想法爲什麼蛋糕即使它們存在也不拉圖標?

+1

打開瀏覽器網絡控制檯,檢查字體文件的請求和響應是什麼樣子。 – ndm

+1

通過查看源代碼/ DOM結構(它們只會顯示給出的內容),您不會知道文件是否被拖動。在「控制檯」標籤下查看會給你更多關於錯誤的細節。考慮到你的情況,我確信有很少的路徑問題出現在那裏 –

+0

你是正確的:當我檢查代碼時,我可以看到這些字體文件的404錯誤。爲什麼蛋糕如果它們出現在默認文件夾App/webroot/fonts中,它們不能拉字體? –

回答

0
  1. 轉到您的CSS文件夾。
  2. 打開bootstrap.min.css文件。
  3. 在那搜索glyphicon文本。
  4. 你可以找到它的網址。
  5. 您應該將字體文件夾名稱更改爲字體。
  6. 去享受你的生活。 :)
+0

刪除我的項目的tmp文件夾中的所有內容後,我解決了它。這是否應該發生?不知道,但在刪除該文件夾並清除瀏覽器信息後,它工作。感謝您的幫助! –

+0

哦,是的,緩存是一種痛苦......它之前已經解決了,它只是不斷吐出錯誤的東西,不用擔心它。下一次,更改日誌級別幾次,它會清除所有這些,當你調試這樣神祕的東西時。 –