loveorigami/yii2-icofont

为 Yii2 框架提供 IcoFont 资产包 http://icofont.com

安装量: 2,497

依赖项: 0

建议者: 0

安全性: 0

星标: 5

关注者: 4

分支: 2

公开问题: 0

语言:CSS

类型:yii2-extension

1.3 2016-09-02 08:14 UTC

This package is auto-updated.

Last update: 2024-09-21 20:46:25 UTC


README

Latest Stable Version Total Downloads License

此扩展为 Yii 2.0 应用程序提供带有 IcoFont 的资产包,并帮助使用图标。

安装

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

运行以下命令

composer require "loveorigami/yii2-icofont:*"

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

"loveorigami/yii2-icofont": "*",

使用方法

在视图中

lo\icofont\IcoFontAsset::register($this);

或在主应用程序资产包中的依赖项

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'lo\icofont\IcoFontAsset'
	];
}

IcoFont (FI) 助手示例

use lo\icofont\FI;

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

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

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

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

// icon with additional methods
echo FI::icon('arrow-right')->inverse();    // <i class="icofont icofont-arrow-right icofont-inverse"></i>
echo FI::icon('spinner')->spin();           // <i class="icofont icofont-spinner icofont-spin"></i>
echo FI::icon('home')->fixedWidth();        // <i class="icofont icofont-home icofont-fw"></i>
echo FI::icon('home')->li();                // <i class="icofont icofont-home icofont-li"></i>
echo FI::icon('home')->border();            // <i class="icofont icofont-home icofont-border"></i>
echo FI::icon('arrow-right')->pullLeft();   // <i class="icofont icofont-arrow-right icofont-pull-left"></i>
echo FI::icon('arrow-right')->pullRight();  // <i class="icofont icofont-arrow-right icofont-pull-right"></i>

// icon size
echo FI::icon('adjust')->size(FI::SIZE_3X);
// values: FI::SIZE_LARGE, FI::SIZE_2X, FI::SIZE_3X, FI::SIZE_4X, FI::SIZE_5X
// <i class="icofont icofont-adjust icofont-size-3x"></i>

// icon rotate
echo FI::icon('adjust')->rotate(FI::ROTATE_90); 
// values: FI::ROTATE_90, FI::ROTATE_180, FI::ROTATE_180
// <i class="icofont icofont-adjust icofont-rotate-90"></i>

// icon flip
echo FI::icon('adjust')->flip(FI::FLIP_VERTICAL); 
// values: FI::FLIP_HORIZONTAL, FI::FLIP_VERTICAL
// <i class="icofont icofont-adjust icofont-flip-vertical"></i>

// icon with multiple methods
echo FI::icon('home')
        ->spin()
        ->fixedWidth()
        ->pullLeft()
        ->size(FI::SIZE_LARGE);
// <i class="icofont icofont-home icofont-spin icofont-fw icofont-pull-left icofont-size-lg"></i>

// icons stack
echo FI::stack()
        ->on('square')
        ->icon('shield');
// <span class="icofont-stack">
//   <i class="icofont icofont-shield icofont-stack-2x"></i>
//   <i class="icofont icofont-square icofont-stack-1x"></i>
// </span>

// icons stack with additional attributes
echo FI::stack(['data-role' => 'stacked-icon'])
     ->on(FI::icon('square')->inverse())
     ->icon(FI::icon('shield')->spin());
// <span class="icofont-stack" data-role="stacked-icon">
//   <i class="icofont icofont-square-o icofont-inverse icofont-stack-2x"></i>
//   <i class="icofont icofont-shield icofont-spin icofont-stack-1x"></i>
// </span>

// unordered list icons 
echo FI::ul(['data-role' => 'unordered-list'])
    ->item('spinner', 'Bullet item')
    ->item('check', 'Checked item');
// <ul class="icofont-ul" data-role="unordered-list">
//   <li><i class="icofont icofont-spinner icofont-li"></i>Bullet item</li>
//   <li><i class="icofont icofont-check icofont-li"></i>Checked Item</li>
// </span>

// autocomplete icons name in IDE
echo FI::icon(FI::_MAGIC);
echo FI::icon(FI::_ARROW_RIGHT);
echo FI::stack()
     ->on(FI::_SQUARE)
     ->icon(FI::_SHIELD);

另请参阅

许可证

loveorigami/yii2-icofont 在 MIT 许可证下发布。有关详细信息,请参阅捆绑的 LICENSE.md