README

此扩展为Yii2应用提供带有Font Awesome的资产包，并包含使用图标的辅助工具。

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

代码状态

支持

• GutHuB问题
• 公共聊天

更新到2.17

注意：在2.17版本中，已删除过时的方法。更多详情请查看变更日志。

安装

推荐通过composer安装此扩展。

运行以下命令：

composer require "rmrevin/yii2-fontawesome:~2.17"

或在您的composer.json文件的require部分添加：

"rmrevin/yii2-fontawesome": "~2.17",

使用方法

在视图中

rmrevin\yii\fontawesome\AssetBundle::register($this);

或作为主应用程序资产包的依赖项

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'rmrevin\yii\fontawesome\AssetBundle'
	];
}

类引用

命名空间: rmrevin\yii\fontawesome;

###类FA或FontAwesome

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

###类component\Icon ($Icon)

• (string)$Icon - 渲染图标
• $Icon->render() - 已过时！渲染图标
• $Icon->tag($value) - 已过时！为图标设置另一个HTML标签（默认 i）
  • $value - 标签名
• $Icon->addCssClass($value) - 在$value中向HTML标签添加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 ($Stack)

• (string)$Stack - 渲染图标堆栈
• $Stack->render() - 已过时！渲染图标堆栈
• $Stack->tag($value) - 已过时！为图标堆栈设置另一个HTML标签（默认 span）
• $Stack->icon($icon, $options=[]) - 设置堆栈的图标
  • $icon - 图标名称或 component\Icon 对象
  • $options - 图标 HTML 标签的额外属性。
• $Stack->icon($icon, $options=[]) - 为堆栈设置背景图标
  • $icon - 图标名称或 component\Icon 对象
  • $options - 图标 HTML 标签的额外属性。

辅助函数示例

use rmrevin\yii\fontawesome\FA;

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

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

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

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

// icon with additional methods
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')->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>

// icon size
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>

// icon rotate
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>

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

// icon with multiple methods
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>

// icons stack
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>

// icons stack with additional attributes
echo FA::stack(['data-role' => 'stacked-icon'])
     ->on(FA::Icon('square')->inverse())
     ->icon(FA::Icon('cog')->spin());
// <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>

// unordered list icons 
echo FA::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="fa fa-circle fa-li"></i>Bullet item</li>
//   <li><i class="fa fa-check fa-li"></i>Checked Item</li>
// </span>

// autocomplete icons name in IDE
echo FA::icon(FA::_COG);
echo FA::icon(FA::_DESKTOP);
echo FA::stack()
     ->on(FA::_CIRCLE_O)
     ->icon(FA::_TWITTER);

设置另一个前缀

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>