yii2 fontawesome

字体下载 • 2025-08-12

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 );
下载源码

通过命令行克隆项目:

git clone https://github.com/rmrevin/yii2-fontawesome.git

相关文章

merlin

2025-08-12

react native fontawesome

2025-08-12

bootstrap simple admin template

2025-08-12

FontAwesomeKit.Swift

2025-08-12

推荐阅读

向上：银河游戏免安装正式版

2026-01-23

风暴驭使正式中文版

2026-01-23

冥河：贪婪之刃中文试玩版

2026-01-23

超级键盘侠免安装绿色中文版

2026-01-23