YII2,添加FontAwesome

1、初始化項目php

經過 Composer 來初始化css

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

2、安裝 FontAwesomejson

仍然經過 Composer 來安裝。搜索 packagist.org 官方的包列表,咱們找到了 FontAwesome 的配置。將 FortAwesome/Font-Awesome": "*" 添加到項目的 composer.json 配置文件裏。bootstrap

"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 的包到項目本地。swift

3、建立 FontAwesome 資源包(asset bundle)瀏覽器

爲了使用這些庫,咱們須要在項目的 /assets 目錄下建立一個 FontAwesomeAsset.phpyii2

<?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',
    ];
}

使用資源包:app

1.在某一個特定頁面引入這個資源包composer

// 這兩句直接寫在那一頁的 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 資源(以下爲谷歌瀏覽器開發者工具中顯示內容)

相關文章
相關標籤/搜索