yii2 fontawesome - 左子网

yii 2字体很棒的资产包

该扩展程序为YII Framework 2.0应用程序的字体提供了一个资产捆绑包，并为使用图标提供了助手。

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

代码状态

支持

Guthub问题
公众聊天

Fontawesome版本

版本的字体令人敬畏	扩展的版本
4.*	〜2.17
5.*	〜3.0

更新为`3.2`

在3.2版rmrevin\\yii\\fontawesome\\AssetBundle软件包默认情况下，请小心。在更改中更多。

更新为`3.0`

在3.0版中谨慎删除的方法。在更改中更多。

更新为`2.17`

在版本2.17中谨慎删除的方法。在更改中更多。

安装

安装此扩展程序的首选方法是通过作曲家。

要么运行

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添加为App Asset Bundle的依赖：

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

选修的

为了使不要安装字体可感知软件包的免费版本，您可以将其添加到composer.json的replace部分。

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

使用FA免费版本

CDN

将CdnFreeAssetBundle添加为App Asset Bundle的依赖：

 class AppAsset extends AssetBundle
{
	// ...

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

或在您的视图中注入CdnFreeAssetBundle ：

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

作曲家

供应商中已经安装了免费版本的fortawesome/font-awesome 。

将NpmFreeAssetBundle添加为App Asset Bundle的依赖：

 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=[]) – 创建一个可用于fontawesome html图标的component\\Icon
- $name – 字体中的图标名称很棒。
- $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) – 添加到$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 Class 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 -flip 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://font*aw*es*ome.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: .3 em; }

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

yii 2字体很棒的资产包

代码状态

支持

Fontawesome版本

更新为3.2

更新为3.0

更新为2.17

安装

FA Pro版本使用

CDN

NPM

选修的

使用FA免费版本

CDN

作曲家

班级参考

类FAB ， FAL ， FAR ， FAS或FontAwesome

类component\\Icon

类component\\Stack

助手示例

相关文章

微信

左子网

QQ交流群

更新为`3.2`

更新为`3.0`

更新为`2.17`

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

类`component\\Icon`

类`component\\Stack`