simialbi/yii2-fontawesome

为 Yii2 应用提供 Font Awesome 资产包

维护者

详细信息

github.com/simialbi/yii2-fontawesome

源代码

问题

安装量: 1,634

依赖项: 2

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 49

类型:yii2-extension

3.5.0 2022-07-28 11:51 UTC

Requires

Requires (Dev)

Suggests

Replaces

MIT 58cc872a383078449d4a83a2fc96f32d19ba3943

  • Revin Roman <roman.woop@rmrevin.com>
  • Simon Karlen <simi.albi.woop@outlook.com>

assetbundlefontyiiawesome

This package is auto-updated.

Last update: 2024-08-28 17:29:25 UTC

README

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

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

License Latest Stable Version Latest Unstable Version Total Downloads Build Status

支持

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.4"

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

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

使用 fa pro 版本

CDN

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

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

或者将 CdnProAssetBundle 注入到您的视图中

class AppAsset extends AssetBundle
{
	// ...

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

npm

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

安装字体 npm 包

或者

npm install @fortawesome/fontawesome-pro

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

yarn add @fortawesome/fontawesome-pro

或者将 NpmProAssetBundle 注入到您的视图中

class AppAsset extends AssetBundle
{
	// ...

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

可选

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

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

使用 fa free 版本

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

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

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

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