README

为Yii 2.0 PHP框架选择Font Awesome符号集的Widget。

SymbolPicker 允许您从Font Awesome（最多版本4.3）中选择符号的类名。它还允许您选择颜色和附加效果的类名。

SymbolPicker Widget的演示在此处 http://www.sjaakpriester.nl/software/symbolpicker。

先决条件

SymbolPicker 只有在您的网站中加载了Font Awesome才有意义。实现这一点的最简单方法是向网站的AppAsset.php文件的css属性中添加一行（请查阅assets目录），如下所示

<?php
class AppAsset extends AssetBundle
{
    public $css = [
    	'//maxcdn.bootstrap.ac.cn/font-awesome/4.2.0/css/font-awesome.min.css',
    	'css/site.css'
		...	// other css files
	];
	...	
}
?>

还有其他方法可以使Font Awesome对您的网站可用 http://fontawesome.io/get-started/。

注意，当前版本的 SymbolPicker 与Font Awesome 5.0及以上版本不兼容。

安装

安装 SymbolPicker 的首选方式是通过 Composer。您可以在您的 composer.json 文件的require部分添加以下内容

"sjaakp/yii2-symbol-picker": "*"

或者运行

composer require sjaakp/yii2-symbol-picker "*"

您也可以通过 下载ZIP格式的源代码来手动安装 SymbolPicker。

使用SymbolPicker

SymbolPicker 是一个Yii 2.0的 InputWidget。像任何其他InputWidget一样，它可以与一个model和attribute（或name和value）关联。

Symbolpicker 在命名空间 sjaakp\symbolpicker 中。

例如，要将 SymbolPicker 与表单视图中的 'icon' 属性关联，请使用以下代码

use sjaakp\symbolpicker\SymbolPicker;
    
...
<?= $form->field($model, 'icon')->widget(SymbolPicker::class) ?>
...

选项

SymbolPicker 默认运行。它有以下选项来修改其行为

• labels：由小部件使用的标签列表。如果标签设置为false，则相应的元素不会被渲染。
• icons：可选的Font Awesome图标列表。每个项目是图标的类名，不带'fa-'部分。例如，'calculator'指的是'fa-calculator'图标。默认：所有Font Awesome图标，不包括别名。版本4.3。请参阅：http://fontawesome.io/icons/。
• colors：可选颜色列表。每个项目是颜色名称，它将生成一个'col-***'颜色类名。例如，'darkblue'指的是类名'col-darkblue'。默认：一组CSS3命名颜色。
• effects：可选的Font Awesome效果列表。每个项目是效果的类名，不带'fa-'部分。例如，'flip-horizontal'指的是'fa-flip-horizontal'效果。默认：大多数Font Awesome效果。版本4.3。请参阅：http://fontawesome.io/examples/#rotated-flipped。
• buttonOptions：下拉按钮的HTML选项数组。默认：[]（空数组）。您可以使用此来设置按钮的CSS类。

当然，SymbolPicker 也拥有正常的 InputWidget 属性。

颜色类

所有 CSS3 命名颜色的 CSS 颜色类都在文件 assets\symbol-colors.css 中。您可以在项目的其他部分使用这个文件。