README

本扩展为Yii2应用程序提供了包含Font Awesome的资产包，并提供了使用图标的助手。

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

代码状态

支持

• GutHub问题
• 公共聊天

Fontawesome版本

更新到3.2

在版本3.2中请注意，默认情况下rmrevin\yii\fontawesome\AssetBundle包使用cdn。更多详情请查看变更日志。

更新到3.0

在版本3.0中已删除弃用的方法。更多详情请查看变更日志。

更新到2.17

在版本2.17中已删除弃用的方法。更多详情请查看变更日志。

安装

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

运行以下命令：

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

或

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

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

与fa pro版本一起使用

CDN

在此处注册您的域名 - https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

将CdnProAssetBundle添加为您的应用程序资产包的依赖项

class AppAsset extends AssetBundle
{
	// ...

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

或注入CdnProAssetBundle到您的视图中

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

NPM

安装字体npm包

npm install @fortawesome/fontawesome-pro

或

yarn add @fortawesome/fontawesome-pro

将NpmProAssetBundle添加为您的应用程序资产包的依赖项

class AppAsset extends AssetBundle
{
	// ...

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

或注入NpmProAssetBundle到您的视图中

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

可选

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

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

与fa免费版本一起使用

CDN

将CdnFreeAssetBundle添加为您的应用程序资产包的依赖项

class AppAsset extends AssetBundle
{
	// ...

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

或注入CdnFreeAssetBundle到您的视图中

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

Composer

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

将NpmFreeAssetBundle添加为您的应用程序资产包的依赖项

class AppAsset extends AssetBundle
{
	// ...

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

或注入NpmFreeAssetBundle到您的视图中

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

类引用

命名空间: rmrevin\yii\fontawesome;

类FAB，FAL，FAR，FAS或FontAwesome

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

类component\Icon

• (string)$Icon - 渲染图标
• $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) - 添加具有尺寸的CSS类到HTML标签
  • $value - 尺寸值（选项：FA::SIZE_LARGE、FA::SIZE_2X、FA::SIZE_3X、FA::SIZE_4X、FA::SIZE_5X）
• $Icon->rotate($value) - 添加具有旋转的CSS类到HTML标签
  • $value - 旋转值（选项：FA::ROTATE_90、FA::ROTATE_180、FA::ROTATE_270）
• $Icon->flip($value) - 添加具有翻转的CSS类到HTML标签
  • $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 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'); // <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);