php - jason lewis basset 在 laravel 4 中没有很好地显示图标

Question

我在 laravel 4 中渲染 bootstrap 主题的 css+html 时遇到问题。我通过 admin template ，网络浏览器会显示类似的内容 .我用 jasonlewis basset生成管理模板。如何解决这个问题？我在 app\config\packages\jasonlewis\basset\config.php 中使用它:

'collections' => array(

    'public' => function($collection)
    {
        $collection->directory('assets/css', function($collection)
        {
            $collection->add('bootstrap.min.css');
            $collection->add('jquery-ui-1.10.3.custom.css');
            $collection->add('fullcalendar.css');
            $collection->add('chosen.css');
            $collection->add('select2.css');
            $collection->add('jquery.cleditor.css');
            $collection->add('jquery.noty.css');
            $collection->add('noty_theme_default.css');
            $collection->add('elfinder.min.css');
            $collection->add('elfinder.theme.css');
            $collection->add('uploadify.css');
            $collection->add('jquery.gritter.css');
            $collection->add('font-awesome.min.css');
            $collection->add('font-awesome-ie7.min.css');
            $collection->add('glyphicons.css');
            $collection->add('halflings.css');
            $collection->add('dropzone.css');
            $collection->add('xcharts.min.css');
            $collection->add('jquery.easy-pie-chart.css');
            $collection->add('icheck/all.css');
            $collection->add('bootstrap-editable.css');
            $collection->add('lato300.css');
            $collection->add('lato.css');
            $collection->add('kausha.css');
            $collection->add('style.min.css');
            $collection->add('retina.min.css');
        })->apply('UriRewriteFilter')->apply('CssMin');

        $collection->directory('assets/js', function($collection)
        {
            $collection->add('html5.js');
            $collection->add('respond.min.js');
            $collection->add('jquery-2.0.3.min.js');
        })->apply('JsMin');
    },

    'admin' => function($collection)
    {
        $collection->directory('assets/css', function($collection)
        {
            $collection->add('bootstrap.min.css');
            $collection->add('jquery-ui-1.10.3.custom.css');
            $collection->add('fullcalendar.css');
            $collection->add('chosen.css');
            $collection->add('select2.css');
            $collection->add('jquery.cleditor.css');
            $collection->add('jquery.noty.css');
            $collection->add('noty_theme_default.css');
            $collection->add('elfinder.min.css');
            $collection->add('elfinder.theme.css');
            $collection->add('uploadify.css');
            $collection->add('jquery.gritter.css');
            $collection->add('font-awesome.min.css');
            $collection->add('font-awesome-ie7.min.css');
            $collection->add('glyphicons.css');
            $collection->add('halflings.css');
            $collection->add('dropzone.css');
            $collection->add('xcharts.min.css');
            $collection->add('jquery.easy-pie-chart.css');
            $collection->add('icheck/all.css');
            $collection->add('bootstrap-editable.css');
            $collection->add('lato300.css');
            $collection->add('lato.css');
            $collection->add('kausha.css');
            $collection->add('style.min.css');
            $collection->add('retina.min.css');
        })->apply('UriRewriteFilter')->apply('CssMin');

        $collection->directory('assets/js', function($collection)
        {
            $collection->add('html5.js');
            $collection->add('respond.min.js');
            $collection->add('jquery-2.0.3.min.js');
            //$collection->requireDirectory('../../../vendor/twbs/bootstrap/js');
            $collection->add('jquery-migrate-1.2.1.min.js');
            $collection->add('bootstrap.min.js');
            $collection->add('jquery-ui-1.10.3.custom.min.js');
            $collection->add('jquery.ui.touch-punch.min.js');
            $collection->add('jquery.sparkline.min.js');
            $collection->add('fullcalendar.min.js');
            $collection->add('excanvas.min.js');

            $collection->add('jquery.flot.min.js');
            $collection->add('jquery.flot.pie.min.js');
            $collection->add('jquery.flot.stack.min.js');
            $collection->add('jquery.flot.resize.min.js');
            $collection->add('jquery.flot.time.min.js');
            $collection->add('jquery.autosize.min.js');
            $collection->add('jquery.placeholder.min.js');
            $collection->add('moment.min.js');
            $collection->add('daterangepicker.min.js');
            $collection->add('jquery.easy-pie-chart.min.js');
            $collection->add('jquery.dataTables.min.js');
            $collection->add('dataTables.bootstrap.min.js');
            $collection->add('custom.min.js');
            $collection->add('core.min.js');
            $collection->add('pages/index.js');
        })->apply('JsMin');
    }

Answer 1

你确实有很多 Assets 。发生这种情况是因为你的 glyphicons 路径是错误的 - 请记住，当 basset 编译时(甚至当它不编译时)你的 css 它将移动到不同的目录。不幸的是，你没有包含配置的这一部分，所以我不知道你告诉它把文件移动到哪里。如果您有字形 Assets 的相对路径，这可能是问题的根源。

您可以通过将所有资源设置为原始资源来验证这是否是问题所在(这将强制它们从现有位置加载:

例如

$collection->add('bootstrap.min.css')->raw();

此外，我在过去遇到了一些问题，无法让超棒的字体很好地播放。我建议您在找出问题所在的同时将其排除在等式之外 - 事实上，我会注释掉尽可能多的 Assets 以隔离问题。

最后一点 - 为什么要使用 css？ bootstrap 的妙处之一是它用 less 编写，basset 的妙处之一是它可以 less 预编译……我会让你填补空白