一、初始化項目
通過 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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
