一、初始化項目
通過 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 資源(如下為谷歌瀏覽器開發者工具中顯示內容)
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

