Blame view

vendor/rmrevin/yii2-fontawesome/README.md 7.39 KB
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.
  
  [![License](https://poser.pugx.org/rmrevin/yii2-fontawesome/license.svg)](https://packagist.org/packages/rmrevin/yii2-fontawesome)
  [![Latest Stable Version](https://poser.pugx.org/rmrevin/yii2-fontawesome/v/stable.svg)](https://packagist.org/packages/rmrevin/yii2-fontawesome)
  [![Latest Unstable Version](https://poser.pugx.org/rmrevin/yii2-fontawesome/v/unstable.svg)](https://packagist.org/packages/rmrevin/yii2-fontawesome)
  [![Total Downloads](https://poser.pugx.org/rmrevin/yii2-fontawesome/downloads.svg)](https://packagist.org/packages/rmrevin/yii2-fontawesome)
  
  Code Status
  -----------
  [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/rmrevin/yii2-fontawesome/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/rmrevin/yii2-fontawesome/?branch=master)
  [![Code Coverage](https://scrutinizer-ci.com/g/rmrevin/yii2-fontawesome/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/rmrevin/yii2-fontawesome/?branch=master)
  [![Travis CI Build Status](https://travis-ci.org/rmrevin/yii2-fontawesome.svg)](https://travis-ci.org/rmrevin/yii2-fontawesome)
  [![Dependency Status](https://www.versioneye.com/user/projects/54119b799e16229fe00000da/badge.svg)](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>
  ```