CODEWITHSUNDEEP
twitter-bootstrapyii2glyphicons
asela daskon
asela daskon

Reputation: 564

Create custom glyphicon and add into bootstrap in Yii2

New updates my asset file DashboardAsset which was created inside the asset directory. i have several asset files in this directory. 

   <?php

namespace app\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <[email protected]>
 * @since 2.0
 */
class DashboardAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/dashboard.css',
        'css/transport.css',
    ];
    public $js = [

    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

updated folder structure updated folder structure

Calling the transport icon

enter image description here

final appearance of the menu enter image description here

Upvotes: 1

Views: 1300

Answers (1)

meysam
meysam

Reputation: 1794

You must define a new asset bundle file for your new fonts. Put your fonts into a folder under web called fonts and create style file of including web fonts on a file under css folder (Please be careful about address of fonts on your css file. It's usually that you must address them as ../fonts/transport.ttf). Thus your structure is like this:

-| web/
 --| fonts/
   --| transport.ttf
   --| transport.eot
   --| transport.svg
   --| transport.woff
 --| css/
   -- transport.css

Now define a asset bundle under assets folder based on Defining Asset Bundles - The Definitive Guide to Yii 2.0 like this:

<?php

namespace app\assets;

use yii\web\AssetBundle;

class TransportAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/transport.css',
    ];
    public $depends = [
        'yii\bootstrap\BootstrapAsset',
    ];
}

Now on each view file that you want to use transport glyphicon, register you asset file:

<?php
    \app\assets\TransportAsset::register($this);
?>
<!-- Some HTML Code -->

Upvotes: 2

Related Questions