简体   繁体   English

Bootstrap Glyphicons未显示在Cakephp中

[英]Bootstrap Glyphicons not showing in Cakephp

I am using CakePhp 3.4.7 and Bootstrap 3.3.7 and Bootstrap is working fine except that Glyphicons are not showing. 我正在使用CakePhp 3.4.7和Bootstrap 3.3.7,并且Bootstrap正常运行,但没有显示Glyphicons。 Here's what my Login page looks like and you can see the icons are missing: http://i.imgur.com/wTAZEyO.jpg 这是我的登录页面的外观,您可以看到缺少的图标: http : //i.imgur.com/wTAZEyO.jpg

I placed all the glyphicons-halflings-regular.* fonts in the App/webroot/font directory and the bootsrap.min.css in App/webroot/css and bootsrap.min.js/jquery-3.2.1.min.js in App/webroot/js 我将所有glyphicons-halflings-regular。*字体放在App / webroot / font目录中,并将bootsrap.min.css放在App / webroot / css和bootsrap.min.js / jquery-3.2.1.min.js中。应用/根目录/ JS

And inspecting my website I can see both css and js files are being pulled correctly and in fact the code is working: http://i.imgur.com/mFO3HWhh.jpg 并检查我的网站,我可以看到css和js文件都被正确拉出,并且实际上代码在起作用: http : //i.imgur.com/mFO3HWhh.jpg

Here is my code 这是我的代码

DEFAULT CTP HEAD 默认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>

LOGINT CTP 登录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>

I can see that in my bootstrap.min.css files the path is correct. 我可以在bootstrap.min.css文件中看到正确的路径。 Any idea why Cake is not pulling the icons even though they exist? 知道为什么Cake即使存在也不会拉图标吗?

  1. Go to your CSS folder. 转到您的CSS文件夹。
  2. Open the bootstrap.min.css file. 打开bootstrap.min.css文件。
  3. Search for glyphicon text in that. 在其中搜索glyphicon文本。
  4. You can find out its url address. 您可以找到其网址。
  5. You should change the font folder name to fonts. 您应该将字体文件夹名称更改为字体。
  6. Go and enjoy your life. 去享受你的生活。 :) :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM