Adding FontAwesome to your Yii2 project via Composer

Well, it is time for Yii2 folks. Yep, even if its on alpha :)

This time I would like to explain how to include Fontawesome (external assets) to your Yii2 project. For this example, I am going to use the yii2 app-advance project template.

For this tutorial, I assume that you have `composer` or `composer.phar` installed on your computer.

Step 1 – Initialize your project

Install via Composer

php composer.phar create-project --stability=dev yiisoft/yii2-app-advanced /path/to/yii-application
Configure your environment

On my case, the only thing I did was to change the params-local.php file in environments/dev/common/config folder and edit the database configuration.

Run the
init

command

./init

Once the command runs, you need to select your environment. In my case, I choosed [0] Development.
In addition, you can run the ./yii migrate command to setup your tables… but thats not important for the example.

Step 2 – Install FontAwesome

Now that we have the project setup, its time to include our fontawesomeness. For that, we are going to make use of composer.
By checking on packagist.org or the FontAwesome repository, we see that to install FontAwesome on our project we need to add FortAwesome/Font-Awesome": "*" on our composer.json. This is how it looks on mine:

// ...
"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": "*"
},
// ...

Step 3 – Create your FontAwesome asset bundle

To register the files, we are going to create an asset bundle named FontAwesomeAsset.php and place it on frontend/assets with the following contents:

namespace frontend\assets;
use yii\web\AssetBundle;
class FontAwesomeAsset extends AssetBundle
{
    // The files are not web directory accessible, therefore we need
    // to specify the sourcePath property. Notice the @vendor alias used.
    public $sourcePath = '@vendor/fortawesome/font-awesome';
    public $css = [
        'css/font-awesome.css',
    ];
}

Register the files!

There are a couple of ways of doing it.

The following example is if you wish to register the bundle on a specific view:

// this code is written on that specific view
use frontend\assets\FontAwesomeAsset;
FontAwesomeAsset::register($this);

But it could be that you wish to use it as part of another asset bundle or globally registered on your application. For the following example, we going to registered as part of the main application asset bundle AppAsset:

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',
        // here we add our FontAwesomeAsset bundle class
        'frontend\assets\FontAwesomeAsset'
    ];
}

If you check your frontend/views/layouts.php file you see how AppAsset registers the files.

use frontend\assets\AppAsset;
/**
 * @var \yii\web\View $this
 * @var string $content
 */
AppAsset::register($this);


2 comments

  1. Joad.s   •  

    Hi,
    Thanks for providing information on Yii framework. I think Yii is a fast, secure, high performance PHP framework for developing web 2.0 applications, and The Yii Development is top class, affordable and offer several features to build unique and quality applications.

  2. Pingback: How to use BootstrapInterface - Yii2 | El Blog del Antonio

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>