YII2,添加FontAwesome

系统 2147 0

一、初始化项目

通过 Composer 来初始化

composer create-project --prefer-dist yiisoft/yii2-app-basic myapp(或使用php composer.phar create-project --prefer-dist yiisoft/yii2-app-basic myapp

二、安装 FontAwesome

仍然通过 Composer 来安装。搜索  packagist.org  官方的包列表,我们找到了 FontAwesome 的配置。将  FortAwesome/Font-Awesome": "*"  添加到项目的 composer.json 配置文件里。

      
        "
      
      
        require
      
      
        "
      
      
        : {

    
      
      
        "
      
      
        php
      
      
        "
      
      : 
      
        "
      
      
        >=5.4.0
      
      
        "
      
      
        ,

    
      
      
        "
      
      
        hybridauth/hybridauth
      
      
        "
      
      : 
      
        "
      
      
        dev-master
      
      
        "
      
      
        ,

    
      
      
        "
      
      
        FortAwesome/Font-Awesome
      
      
        "
      
      : 
      
        "
      
      
        *
      
      
        "
      
      , 
      
        //
      
      
         <- 这里
      
      
        "
      
      
        yiisoft/yii2
      
      
        "
      
      : 
      
        "
      
      
        *
      
      
        "
      
      
        ,

    
      
      
        "
      
      
        yiisoft/yii2-swiftmailer
      
      
        "
      
      : 
      
        "
      
      
        *
      
      
        "
      
      
        ,

    
      
      
        "
      
      
        yiisoft/yii2-bootstrap
      
      
        "
      
      : 
      
        "
      
      
        *
      
      
        "
      
      
        ,

    
      
      
        "
      
      
        yiisoft/yii2-debug
      
      
        "
      
      : 
      
        "
      
      
        *
      
      
        "
      
      
        ,

    
      
      
        "
      
      
        yiisoft/yii2-gii
      
      
        "
      
      : 
      
        "
      
      
        *
      
      
        "
      
      
        

},
      
    

然后运行 composer update(或 php composer.phar update) 从 Github 上拉取 FontAwesome 的包到项目本地。

三、创建 FontAwesome 资源包(asset bundle)

为了使用这些库,我们需要在项目的  /assets  目录下创建一个  FontAwesomeAsset.php

      <?
      
        php


      
      
        namespace
      
      
         app\assets;

use yii\web\AssetBundle;


      
      
        class
      
      
         FontAwesomeAsset extends AssetBundle

{

    
      
      
        //
      
      
         下面这些资源文件并不在 web 目录下,浏览器无法直接访问。所以我们需要

    
      
      
        //
      
      
         指定 sourcePath 属性。注意 @vendor 这个 alias,表示 vender 目录
      
      
        public
      
       $sourcePath = 
      
        '
      
      
        @vendor/fortawesome/font-awesome
      
      
        '
      
      
        ;

    
      
      
        public
      
       $css =
      
         [

    
      
      
        '
      
      
        css/font-awesome.css
      
      
        '
      
      
        ,

    ];

}
      
    

使用资源包:

1.在某一个特定页面引入这个资源包

      
        //
      
      
         这两句直接写在那一页的 view 里
      
      
        use app\assets\FontAwesomeAsset;

FontAwesomeAsset::register($
      
      
        this
      
      );
    

2.在网站全局引入,或者将其作为另一个资源的依赖引用。在项目的 asset/AppAsset.php 中加上它:

      <?
      
        php


      
      
        /*
      
      
        *

 * @link 
      
      
        http://www.yiiframework.com/
      
      
        

 * @copyright Copyright (c) 2008 Yii Software LLC

 * @license 
      
      
        http://www.yiiframework.com/license/
      
      
        */
      
      
        namespace
      
      
         app\assets;



use yii\web\AssetBundle;




      
      
        /*
      
      
        *

 * @author Qiang Xue <qiang.xue@gmail.com>

 * @since 2.0

 
      
      
        */
      
      
        class
      
      
         AppAsset extends AssetBundle

{

    
      
      
        public
      
       $basePath = 
      
        '
      
      
        @webroot
      
      
        '
      
      
        ;

    
      
      
        public
      
       $baseUrl = 
      
        '
      
      
        @web
      
      
        '
      
      
        ;

    
      
      
        public
      
       $css =
      
         [

        
      
      
        '
      
      
        css/site.css
      
      
        '
      
      
        ,

    ];

    
      
      
        public
      
       $js =
      
         [

    ];

    
      
      
        public
      
       $depends =
      
         [

        
      
      
        '
      
      
        yii\web\YiiAsset
      
      
        '
      
      
        ,

        
      
      
        '
      
      
        yii\bootstrap\BootstrapAsset
      
      
        '
      
      
        ,

        
      
      
        '
      
      
        app\assets\FontAwesomeAsset
      
      
        '
      
      
        ,

    ];

}
      
    

刷新页面,可以查看已经引入的 css、js 资源(如下为谷歌浏览器开发者工具中显示内容)

YII2,添加FontAwesome

YII2,添加FontAwesome


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论