簡體   English   中英

Bootstrap Glyphicons未顯示在Cakephp中

[英]Bootstrap Glyphicons not showing in Cakephp

我正在使用CakePhp 3.4.7和Bootstrap 3.3.7,並且Bootstrap正常運行,但沒有顯示Glyphicons。 這是我的登錄頁面的外觀,您可以看到缺少的圖標: http : //i.imgur.com/wTAZEyO.jpg

我將所有glyphicons-halflings-regular。*字體放在App / webroot / font目錄中,並將bootsrap.min.css放在App / webroot / css和bootsrap.min.js / jquery-3.2.1.min.js中。應用/根目錄/ JS

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

這是我的代碼

默認CTP頭

<!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>

登錄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文件中看到正確的路徑。 知道為什么Cake即使存在也不會拉圖標嗎?

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM