280e92c2
Dmitryi
авторизация через...
|
1
|
Yii 2 [Font Awesome](http://fortawesome.github.io/Font-Awesome/) Asset Bundle
|
e9aa73b0
andryeyev
+ adminLte
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
===============================
This extension provides a assets bundle with [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
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
-------
|
280e92c2
Dmitryi
авторизация через...
|
23
24
|
* [GutHub issues](https://github.com/rmrevin/yii2-fontawesome/issues)
* [Public chat](https://gitter.im/rmrevin/support)
|
e9aa73b0
andryeyev
+ adminLte
|
25
26
27
28
29
30
31
32
33
|
Installation
------------
The preferred way to install this extension is through [composer](https://getcomposer.org/).
Either run
```bash
|
280e92c2
Dmitryi
авторизация через...
|
34
|
composer require "rmrevin/yii2-fontawesome:~2.12"
|
e9aa73b0
andryeyev
+ adminLte
|
35
36
37
38
39
|
```
or add
```
|
280e92c2
Dmitryi
авторизация через...
|
40
|
"rmrevin/yii2-fontawesome": "~2.12",
|
e9aa73b0
andryeyev
+ adminLte
|
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
```
to the `require` section of your `composer.json` file.
Usage
-----
In view
```php
rmrevin\yii\fontawesome\AssetBundle::register($this);
```
or as dependency in your main application asset bundle
```php
class AppAsset extends AssetBundle
{
// ...
public $depends = [
// ...
'\rmrevin\yii\fontawesome\AssetBundle'
];
}
```
|
280e92c2
Dmitryi
авторизация через...
|
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
Class reference
---------------
Namespace: `rmrevin\yii\fontawesome`;
###Class `FA` or `FontAwesome`
* `static FA::icon($name, $options=[])` - Creates an [`component\Icon`](#class-componenticon-icon) 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 FA::stack($name, $options=[])` - Creates an [`component\Stack`](#class-componentstack-stack) that can be used to FontAwesome html icon
* `$options` - additional attributes for `span.fa-stack` html tag.
###Class `component\Icon` (`$Icon`)
* `(string)$Icon` - render icon
* `$Icon->render()` - render icon
* `$Icon->tag($value)` - set another html tag for icon (default `i`)
* `$value` - name of tag
* `$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` (`$Stack`)
* `(string)$Stack` - render icon stack
* `$Stack->render()` - render icon stack
* `$Stack->tag($value)` - set another html tag for icon stack (default `span`)
* `$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
---------------
|
e9aa73b0
andryeyev
+ adminLte
|
120
121
122
123
|
```php
use rmrevin\yii\fontawesome\FA;
|
280e92c2
Dmitryi
авторизация через...
|
124
|
// normal use
|
e9aa73b0
andryeyev
+ adminLte
|
125
|
echo FA::icon('home'); // <i class="fa fa-home"></i>
|
280e92c2
Dmitryi
авторизация через...
|
126
127
128
129
130
|
// shortcut
echo FA::i('home'); // <i class="fa fa-home"></i>
// icon with additional attributes
|
e9aa73b0
andryeyev
+ adminLte
|
131
132
133
134
135
|
echo FA::icon(
'arrow-left',
['class' => 'big', 'data-role' => 'arrow']
); // <i class="big fa fa-arrow-left" data-role="arrow"></i>
|
280e92c2
Dmitryi
авторизация через...
|
136
|
// icon in button
|
e9aa73b0
andryeyev
+ adminLte
|
137
138
139
140
|
echo Html::submitButton(
Yii::t('app', '{icon} Save', ['icon' => FA::icon('check')])
); // <button type="submit"><i class="fa fa-check"></i> Save</button>
|
280e92c2
Dmitryi
авторизация через...
|
141
|
// icon with additional methods
|
e9aa73b0
andryeyev
+ adminLte
|
142
143
144
145
146
147
148
149
150
|
echo FA::icon('cog')->inverse(); // <i class="fa fa-cog fa-inverse"></i>
echo FA::icon('cog')->spin(); // <i class="fa fa-cog fa-spin"></i>
echo FA::icon('cog')->fixedWidth(); // <i class="fa fa-cog fa-fw"></i>
echo FA::icon('cog')->ul(); // <i class="fa fa-cog fa-ul"></i>
echo FA::icon('cog')->li(); // <i class="fa fa-cog fa-li"></i>
echo FA::icon('cog')->border(); // <i class="fa fa-cog fa-border"></i>
echo FA::icon('cog')->pullLeft(); // <i class="fa fa-cog pull-left"></i>
echo FA::icon('cog')->pullRight(); // <i class="fa fa-cog pull-right"></i>
|
280e92c2
Dmitryi
авторизация через...
|
151
|
// icon size
|
e9aa73b0
andryeyev
+ adminLte
|
152
153
154
155
|
echo FA::icon('cog')->size(FA::SIZE_3X);
// values: FA::SIZE_LARGE, FA::SIZE_2X, FA::SIZE_3X, FA::SIZE_4X, FA::SIZE_5X
// <i class="fa fa-cog fa-size-3x"></i>
|
280e92c2
Dmitryi
авторизация через...
|
156
|
// icon rotate
|
e9aa73b0
andryeyev
+ adminLte
|
157
158
159
160
|
echo FA::icon('cog')->rotate(FA::ROTATE_90);
// values: FA::ROTATE_90, FA::ROTATE_180, FA::ROTATE_180
// <i class="fa fa-cog fa-rotate-90"></i>
|
280e92c2
Dmitryi
авторизация через...
|
161
|
// icon flip
|
e9aa73b0
andryeyev
+ adminLte
|
162
163
164
165
|
echo FA::icon('cog')->flip(FA::FLIP_VERTICAL);
// values: FA::FLIP_HORIZONTAL, FA::FLIP_VERTICAL
// <i class="fa fa-cog fa-flip-vertical"></i>
|
280e92c2
Dmitryi
авторизация через...
|
166
|
// icon with multiple methods
|
e9aa73b0
andryeyev
+ adminLte
|
167
168
169
170
171
172
173
|
echo FA::icon('cog')
->spin()
->fixedWidth()
->pullLeft()
->size(FA::SIZE_LARGE);
// <i class="fa fa-cog fa-spin fa-fw pull-left fa-size-lg"></i>
|
280e92c2
Dmitryi
авторизация через...
|
174
|
// icons stack
|
e9aa73b0
andryeyev
+ adminLte
|
175
176
177
178
179
180
181
182
|
echo FA::stack()
->icon('twitter')
->on('square-o');
// <span class="fa-stack">
// <i class="fa fa-square-o fa-stack-2x"></i>
// <i class="fa fa-twitter fa-stack-1x"></i>
// </span>
|
280e92c2
Dmitryi
авторизация через...
|
183
|
// icons stack with additional attributes
|
e9aa73b0
andryeyev
+ adminLte
|
184
|
echo FA::stack(['data-role' => 'stacked-icon'])
|
280e92c2
Dmitryi
авторизация через...
|
185
186
|
->on(FA::Icon('square')->inverse())
->icon(FA::Icon('cog')->spin());
|
e9aa73b0
andryeyev
+ adminLte
|
187
188
189
190
191
192
193
194
195
|
// <span class="fa-stack" data-role="stacked-icon">
// <i class="fa fa-square-o fa-inverse fa-stack-2x"></i>
// <i class="fa fa-cog fa-spin fa-stack-1x"></i>
// </span>
// autocomplete icons name in IDE
echo FA::icon(FA::_COG);
echo FA::icon(FA::_DESKTOP);
echo FA::stack()
|
280e92c2
Dmitryi
авторизация через...
|
196
197
|
->on(FA::_CIRCLE_O)
->icon(FA::_TWITTER);
|
e9aa73b0
andryeyev
+ adminLte
|
198
199
200
201
202
203
204
205
206
207
208
209
|
```
### Set another prefix
```php
FA::$cssPrefix = 'awf';
echo FA::icon('home');
// <i class="awf awf-home"></i>
echo FA::icon('cog')->inverse();
// <i class="awf awf-cog awf-inverse"></i>
```
|