Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rmrevin/yii2-fontawesome
Asset Bundle for Yii2 with Font Awesome http://fortawesome.github.io/Font-Awesome/
https://github.com/rmrevin/yii2-fontawesome
List: yii2-fontawesome
assets css font fontawesome icons php
Last synced: 4 days ago
JSON representation
Asset Bundle for Yii2 with Font Awesome http://fortawesome.github.io/Font-Awesome/
- Host: GitHub
- URL: https://github.com/rmrevin/yii2-fontawesome
- Owner: rmrevin
- License: mit
- Created: 2014-02-27T11:44:27.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-07-31T17:36:25.000Z (over 1 year ago)
- Last Synced: 2024-05-20T22:36:40.767Z (6 months ago)
- Topics: assets, css, font, fontawesome, icons, php
- Language: PHP
- Homepage:
- Size: 2.74 MB
- Stars: 148
- Watchers: 16
- Forks: 49
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-yii2 - rmrevin/yii2-fontawesome - Font Awesome asset + helpers. (Core components)
README
Yii 2 [Font Awesome](http://fortawesome.github.io/Font-Awesome/) Asset Bundle
===============================
This extension provides a assets bundle with [Font Awesome](https://fontawesome.com/)
for [Yii framework 2.0](http://www.yiiframework.com/) applications and helper to use icons.
For license information check the [LICENSE](https://github.com/rmrevin/yii2-fontawesome/blob/master/LICENSE)-file.
[](https://packagist.org/packages/rmrevin/yii2-fontawesome)
[](https://packagist.org/packages/rmrevin/yii2-fontawesome)
[](https://packagist.org/packages/rmrevin/yii2-fontawesome)
[](https://packagist.org/packages/rmrevin/yii2-fontawesome)
Code Status
-----------
[](https://scrutinizer-ci.com/g/rmrevin/yii2-fontawesome/?branch=master)
[](https://scrutinizer-ci.com/g/rmrevin/yii2-fontawesome/?branch=master)
[](https://travis-ci.org/rmrevin/yii2-fontawesome)
[](https://www.versioneye.com/user/projects/54119b799e16229fe00000da)
Support
-------
* [GutHub issues](https://github.com/rmrevin/yii2-fontawesome/issues)
* [Public chat](https://gitter.im/rmrevin/support)
Fontawesome version
-------------------
| Version of font-awesome | Version of extension |
| ---:|:--- |
| 4.* | ~2.17 |
| 5.* | ~3.0 |
Update to `3.2`
---------------
Be careful in version 3.2 `rmrevin\yii\fontawesome\AssetBundle` package use cdn by default. More in the [changelog](https://github.com/rmrevin/yii2-fontawesome/blob/master/CHANGELOG.md).
Update to `3.0`
---------------
Be careful in version 3.0 deprecated methods were removed. More in the [changelog](https://github.com/rmrevin/yii2-fontawesome/blob/master/CHANGELOG.md).
Update to `2.17`
----------------
Be careful in version 2.17 deprecated methods were removed. More in the [changelog](https://github.com/rmrevin/yii2-fontawesome/blob/2.x/CHANGELOG.md).
Installation
------------
The preferred way to install this extension is through [composer](https://getcomposer.org/).
Either run
```bash
composer require "rmrevin/yii2-fontawesome:~3.5"
```
or add
```
"rmrevin/yii2-fontawesome": "~3.5",
```
to the `require` section of your `composer.json` file.
Usage with fa pro version
-------------------------
### CDN
Register your domain here - https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
Add `CdnProAssetBundle` as depends of your app asset bundle:
```php
class AppAsset extends AssetBundle
{
// ...
public $depends = [
// ...
'rmrevin\yii\fontawesome\CdnProAssetBundle'
];
}
```
Or inject `CdnProAssetBundle` in your view:
```php
\rmrevin\yii\fontawesome\CdnProAssetBundle::register($this);
```
### NPM
Install npm package of font:
```
npm install @fortawesome/fontawesome-pro
```
or
```
yarn add @fortawesome/fontawesome-pro
```
And add `NpmProAssetBundle` as depends of your app asset bundle:
```php
class AppAsset extends AssetBundle
{
// ...
public $depends = [
// ...
'rmrevin\yii\fontawesome\NpmProAssetBundle'
];
}
```
Or inject `NpmProAssetBundle` in your view:
```php
rmrevin\yii\fontawesome\NpmProAssetBundle::register($this);
```
### Optional
In order for do not install the free version of the font-awesome package, you can add it to the `replace` section of `composer.json`.
```
"replace": {
"fortawesome/font-awesome": "*"
},
```
Usage with fa free version
-------------------------
### CDN
Add `CdnFreeAssetBundle` as depends of your app asset bundle:
```php
class AppAsset extends AssetBundle
{
// ...
public $depends = [
// ...
'rmrevin\yii\fontawesome\CdnFreeAssetBundle'
];
}
```
Or inject `CdnFreeAssetBundle` in your view:
```php
rmrevin\yii\fontawesome\CdnFreeAssetBundle::register($this);
```
# Composer
Free version of package `fortawesome/font-awesome` already installed in vendor.
Add `NpmFreeAssetBundle` as depends of your app asset bundle:
```php
class AppAsset extends AssetBundle
{
// ...
public $depends = [
// ...
'rmrevin\yii\fontawesome\NpmFreeAssetBundle'
];
}
```
Or inject `NpmFreeAssetBundle` in your view:
```php
rmrevin\yii\fontawesome\NpmFreeAssetBundle::register($this);
```
Class reference
---------------
Namespace: `rmrevin\yii\fontawesome`;
### Class `FAB`, `FAL`, `FAR`, `FAS` or `FontAwesome`
* `static FAR::icon($name, $options=[])` - Creates an [`component\Icon`](#class-componenticon) that can be used to FontAwesome html icon
* `$name` - name of icon in font awesome set.
* `$options` - additional attributes for `i.fa` html tag.
* `static FAR::stack($name, $options=[])` - Creates an [`component\Stack`](#class-componentstack) that can be used to FontAwesome html icon
* `$options` - additional attributes for `span.fa-stack` html tag.
### Class `component\Icon`
* `(string)$Icon` - render icon
* `$Icon->addCssClass($value)` - add to html tag css class in `$value`
* `$value` - name of css class
* `$Icon->inverse()` - add to html tag css class `fa-inverse`
* `$Icon->spin()` - add to html tag css class `fa-spin`
* `$Icon->fixedWidth()` - add to html tag css class `fa-fw`
* `$Icon->ul()` - add to html tag css class `fa-ul`
* `$Icon->li()` - add to html tag css class `fa-li`
* `$Icon->border()` - add to html tag css class `fa-border`
* `$Icon->pullLeft()` - add to html tag css class `pull-left`
* `$Icon->pullRight()` - add to html tag css class `pull-right`
* `$Icon->size($value)` - add to html tag css class with size
* `$value` - size value (variants: `FA::SIZE_LARGE`, `FA::SIZE_2X`, `FA::SIZE_3X`, `FA::SIZE_4X`, `FA::SIZE_5X`)
* `$Icon->rotate($value)` - add to html tag css class with rotate
* `$value` - rotate value (variants: `FA::ROTATE_90`, `FA::ROTATE_180`, `FA::ROTATE_270`)
* `$Icon->flip($value)` - add to html tag css class with rotate
* `$value` - flip value (variants: `FA::FLIP_HORIZONTAL`, `FA::FLIP_VERTICAL`)
### Class `component\Stack`
* `(string)$Stack` - render icon stack
* `$Stack->icon($icon, $options=[])` - set icon for stack
* `$icon` - name of icon or `component\Icon` object
* `$options` - additional attributes for icon html tag.
* `$Stack->icon($icon, $options=[])` - set background icon for stack
* `$icon` - name of icon or `component\Icon` object
* `$options` - additional attributes for icon html tag.
Helper examples
---------------
```php
use rmrevin\yii\fontawesome\FAS;
// or (only in pro version https://fontawesome.com/pro)
// use rmrevin\yii\fontawesome\FAR;
// use rmrevin\yii\fontawesome\FAL;
// use rmrevin\yii\fontawesome\FAB;
// normal use
echo FAS::icon('home'); //
// shortcut
echo FAS::i('home'); //
// icon with additional attributes
echo FAS::icon(
'arrow-left',
['class' => 'big', 'data-role' => 'arrow']
); //
// icon in button
echo Html::submitButton(
Yii::t('app', '{icon} Save', ['icon' => FAS::icon('check')])
); // Save
// icon with additional methods
echo FAS::icon('cog')->inverse(); //
echo FAS::icon('cog')->spin(); //
echo FAS::icon('cog')->fixedWidth(); //
echo FAS::icon('cog')->li(); //
echo FAS::icon('cog')->border(); //
echo FAS::icon('cog')->pullLeft(); //
echo FAS::icon('cog')->pullRight(); //
// icon size
echo FAS::icon('cog')->size(FAS::SIZE_3X);
// values: FAS::SIZE_LARGE, FAS::SIZE_2X, FAS::SIZE_3X, FAS::SIZE_4X, FAS::SIZE_5X
//
// icon rotate
echo FAS::icon('cog')->rotate(FAS::ROTATE_90);
// values: FAS::ROTATE_90, FAS::ROTATE_180, FAS::ROTATE_180
//
// icon flip
echo FAS::icon('cog')->flip(FAS::FLIP_VERTICAL);
// values: FAS::FLIP_HORIZONTAL, FAS::FLIP_VERTICAL
//
// icon with multiple methods
echo FAS::icon('cog')
->spin()
->fixedWidth()
->pullLeft()
->size(FAS::SIZE_LARGE);
//
// icons stack
echo FAS::stack()
->icon('twitter')
->on('square-o');
//
//
//
//
// icons stack with additional attributes
echo FAS::stack(['data-role' => 'stacked-icon'])
->on(FAS::Icon('square')->inverse())
->icon(FAS::Icon('cog')->spin());
//
//
//
//
// Stacking text and icons
echo FAS::stack()
->on(FAS::Icon('square'))
->text('1');
//
//
// 1
//
// Stacking text and icons with options
echo FAS::stack()
->on(FAS::Icon('square'))
->text('1', ['tag'=>'strong', 'class'=>'stacked-text']);
//
//
// 1
//
// Now you can add some css for vertical text positioning:
.stacked-text { margin-top: .3em; }
// unordered list icons
echo FAS::ul(['data-role' => 'unordered-list'])
->item('Bullet item', ['icon' => 'circle'])
->item('Checked item', ['icon' => 'check']);
//
-
Bullet item -
Checked Item
//
//
//
// autocomplete icons name in IDE
echo FAS::icon(FAS::_COG);
echo FAS::icon(FAS::_DESKTOP);
echo FAS::stack()
->on(FAS::_CIRCLE_O)
->icon(FAS::_TWITTER);
```