README

此扩展为Yii框架2.0应用提供了Font Awesome资源包和图标使用助手。

有关许可证信息，请查看LICENSE文件。

支持

GutHub问题

Fontawesome版本

安装

安装此扩展的首选方式是通过composer。

运行

composer require "algsupport/yii2-fontawesome:~4.0"

或

"algsupport/yii2-fontawesome": "~4.0",

将以下内容添加到您的composer.json文件的require部分。

与fa pro版本一起使用

CDN

在此处创建一个新的kit - https://fontawesome.com/kits

在components下的assetManager配置中添加您的kit

return [
    // ...
    'components' => [
        'assetManager' => [
            'bundles' => [
                'algsupport\yii\fontawesome\CdnProAssetBundle' => [
                    'js' => [
                        'your kit',
                    ]
                ],
            ],
        ],
    ],
];

将CdnProAssetBundle作为您的应用资源包的依赖项添加

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'algsupport\yii\fontawesome\CdnProAssetBundle'
	];
}

或在视图中注入CdnProAssetBundle

\algsupport\yii\fontawesome\CdnProAssetBundle::register($this);

NPM

安装字体npm包

npm install @fortawesome/fontawesome-pro

或

yarn add @fortawesome/fontawesome-pro

将NpmProAssetBundle作为您的应用资源包的依赖项添加

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'algsupport\yii\fontawesome\NpmProAssetBundle'
	];
}

或在视图中注入NpmProAssetBundle

algsupport\yii\fontawesome\NpmProAssetBundle::register($this);

可选

为了不安装Font Awesome免费版包，您可以将它添加到composer.json的replace部分。

  "replace": {
    "fortawesome/font-awesome": "*"
  },

与fa免费版一起使用

CDN

将CdnFreeAssetBundle作为您的应用资源包的依赖项添加

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'algsupport\yii\fontawesome\CdnFreeAssetBundle'
	];
}

或在视图中注入CdnFreeAssetBundle

algsupport\yii\fontawesome\CdnFreeAssetBundle::register($this);

Composer

包fortawesome/font-awesome的免费版本已安装到vendor中。

将NpmFreeAssetBundle作为您的应用资源包的依赖项添加

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'algsupport\yii\fontawesome\NpmFreeAssetBundle'
	];
}

或在视图中注入NpmFreeAssetBundle

algsupport\yii\fontawesome\NpmFreeAssetBundle::register($this);

类参考

命名空间: algsupport\yii\fontawesome;

类`FAB`，`FAL`，`FAR`，`FAS`或`FontAwesome`

static FAR::icon($name, $options=[]) - 创建一个可以用于FontAwesome html图标的component\Icon
- $name - Font Awesome集中的图标名称。
- $options - 为i.fa html标签添加的额外属性。
static FAR::stack($name, $options=[]) - 创建一个可以用于FontAwesome html图标的component\Stack
- $options - 为span.fa-stack html标签添加的额外属性。

类`component\Icon`

(string)$Icon - 渲染图标
$Icon->addCssClass($value) - 添加到html标签的$value css类
- $value - css类的名称
$Icon->inverse() - 添加到html标签的css类 fa-inverse
$Icon->spin() - 添加到html标签的css类 fa-spin
$Icon->fixedWidth() - 添加到html标签的css类 fa-fw
$Icon->ul() - 添加到html标签的css类 fa-ul
$Icon->li() - 添加到html标签的css类 fa-li
$Icon->border() - 添加到html标签的css类 fa-border
$Icon->pullLeft() - 添加到html标签的css类 pull-left
$Icon->pullRight() - 添加到html标签的css类 pull-right
$Icon->size($value) - 添加带大小的html标签css类
- $value - 大小值（变体：FA::SIZE_LARGE，FA::SIZE_2X，FA::SIZE_3X，FA::SIZE_4X，FA::SIZE_5X）
$Icon->rotate($value) - 为 HTML 标签添加旋转 CSS 类
- $value - 旋转值（选项：FA::ROTATE_90、FA::ROTATE_180、FA::ROTATE_270）
$Icon->flip($value) - 为 HTML 标签添加翻转 CSS 类
- $value - 翻转值（选项：FA::FLIP_HORIZONTAL、FA::FLIP_VERTICAL）

类 `component\Stack`

(string)$Stack - 渲染图标堆栈
$Stack->icon($icon, $options=[]) - 为堆栈设置图标
- $icon - 图标名称或 component\Icon 对象
- $options - 图标 HTML 标签的额外属性。
$Stack->icon($icon, $options=[]) - 为堆栈设置背景图标
- $icon - 图标名称或 component\Icon 对象
- $options - 图标 HTML 标签的额外属性。

辅助示例

use algsupport\yii\fontawesome\FAS;
// or (only in pro version https://fontawesome.com/pro)
// use algsupport\yii\fontawesome\FAR;
// use algsupport\yii\fontawesome\FAL;
// use algsupport\yii\fontawesome\FAB;

// normal use
echo FAS::icon('home'); // <i class="fas fa-home"></i>

// shortcut
echo FAS::i('home'); // <i class="fas fa-home"></i>

// icon with additional attributes
echo FAS::icon(
    'arrow-left', 
    ['class' => 'big', 'data-role' => 'arrow']
); // <i class="big fas fa-arrow-left" data-role="arrow"></i>

// icon in button
echo Html::submitButton(
    Yii::t('app', '{icon} Save', ['icon' => FAS::icon('check')])
); // <button type="submit"><i class="fas fa-check"></i> Save</button>

// icon with additional methods
echo FAS::icon('cog')->inverse();    // <i class="fas fa-cog fa-inverse"></i>
echo FAS::icon('cog')->spin();       // <i class="fas fa-cog fa-spin"></i>
echo FAS::icon('cog')->fixedWidth(); // <i class="fas fa-cog fa-fw"></i>
echo FAS::icon('cog')->li();         // <i class="fas fa-cog fa-li"></i>
echo FAS::icon('cog')->border();     // <i class="fas fa-cog fa-border"></i>
echo FAS::icon('cog')->pullLeft();   // <i class="fas fa-cog pull-left"></i>
echo FAS::icon('cog')->pullRight();  // <i class="fas fa-cog pull-right"></i>

// 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
// <i class="fas fa-cog fa-size-3x"></i>

// icon rotate
echo FAS::icon('cog')->rotate(FAS::ROTATE_90); 
// values: FAS::ROTATE_90, FAS::ROTATE_180, FAS::ROTATE_180
// <i class="fas fa-cog fa-rotate-90"></i>

// icon flip
echo FAS::icon('cog')->flip(FAS::FLIP_VERTICAL); 
// values: FAS::FLIP_HORIZONTAL, FAS::FLIP_VERTICAL
// <i class="fas fa-cog fa-flip-vertical"></i>

// icon with multiple methods
echo FAS::icon('cog')
        ->spin()
        ->fixedWidth()
        ->pullLeft()
        ->size(FAS::SIZE_LARGE);
// <i class="fas fa-cog fa-spin fa-fw pull-left fa-size-lg"></i>

// icons stack
echo FAS::stack()
        ->icon('twitter')
        ->on('square-o');
// <span class="fa-stack">
//   <i class="fas fa-square-o fa-stack-2x"></i>
//   <i class="fas fa-twitter fa-stack-1x"></i>
// </span>

// icons stack with additional attributes
echo FAS::stack(['data-role' => 'stacked-icon'])
     ->on(FAS::Icon('square')->inverse())
     ->icon(FAS::Icon('cog')->spin());
// <span class="fa-stack" data-role="stacked-icon">
//   <i class="fas fa-square-o fa-inverse fa-stack-2x"></i>
//   <i class="fas fa-cog fa-spin fa-stack-1x"></i>
// </span>

// Stacking text and icons
echo FAS::stack()
     ->on(FAS::Icon('square'))
     ->text('1');
// <span class="fa-stack">
//   <i class="fas fa-square fa-stack-2x"></i>
//   <span class="fa-stack-1x">1</span>
// </span>

// Stacking text and icons with options
echo FAS::stack()
     ->on(FAS::Icon('square'))
     ->text('1', ['tag'=>'strong', 'class'=>'stacked-text']);
// <span class="fa-stack">
//   <i class="fas fa-square fa-stack-2x"></i>
//   <strong class="stacked-text fa-stack-1x">1</strong>
// </span>
// 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']);
// <ul class="fa-ul" data-role="unordered-list">
//   <li><i class="fas fa-circle fa-li"></i>Bullet item</li>
//   <li><i class="fas fa-check fa-li"></i>Checked Item</li>
// </span>

// 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);

algsupport / yii2-fontawesome

维护者

详细信息

README

支持

Fontawesome版本

安装

与fa pro版本一起使用

CDN

NPM

可选

与fa免费版一起使用

CDN

Composer

类参考

类`FAB`，`FAL`，`FAR`，`FAS`或`FontAwesome`

类`component\Icon`

类 `component\Stack`

辅助示例

algsupport / yii2-fontawesome

维护者

详细信息

README

支持

Fontawesome版本

安装

与fa pro版本一起使用

CDN

NPM

可选

与fa免费版一起使用

CDN

Composer

类参考

类FAB，FAL，FAR，FAS或FontAwesome

类component\Icon

类 component\Stack

辅助示例

类`FAB`，`FAL`，`FAR`，`FAS`或`FontAwesome`

类`component\Icon`

类 `component\Stack`