jason lewis basset did not show icons well in laravel 4

Question

I have a problem with rendering css+html of the bootstrap theme in laravel 4. I by a admin template, and web browser show me something like that small part of html . I use jasonlewis basset to generate admin template. How to fix this? I use this in 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');
    }

score 2 · Accepted Answer · answered Oct 29 '13 at 10:43

You sure do have a lot of assets. This is happening either because the path to you're glyphicons is wrong - bear in mind that when basset compiles (or even when it doesnt compile) your css it will move it to a different directory. Unfortunately you havent included this section of the config so I dont know where you have told it to move the files to. If you have a relative path to the glyphicon assets this may be the source of the issue.

You could verify if this is the issue by setting all your assets to raw (this will force them to be loaded from their existing location:

e.g.

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

Additionally I have had some issues in the past with getting font-awesome to play nicely. I suggest you take this out of the equation whilst you work out whats gone wrong - in fact I would comment out as many assets as possible to isolate the issue.

As a final point - Why are you using the css? One of the wonderful things about bootstrap is that it's written in less, one of the wonderful things about basset is it can pre-compile less... I'll let you fill in the gaps

jason lewis basset did not show icons well in laravel 4

1 Answers1