README

Font Awesome Icon Selector for CMB2

描述

为强大的自定义元框生成器 CMB2 提供的 Font Awesome 图标选择器

您可以将它用作 CMB2 函数文件中的字段类型。添加新字段，将类型设置为 faiconselect 并将 Font Awesome 图标添加到选项中（查看用法示例）。插件使用 jQuery Font Picker 创建图标选择器。

插件能够使用 Font Awesome 4.7.0 或 5.7.2（仅 Solid 和 Brands 图标）作为图标和选择器。

WordPress 插件

您还可以在此下载此插件： CMB2 Field Type: Font Awesome 或您可以在插件安装页面上搜索 CMB2 Field Type: Font Awesome。

通过 Composer 安装

此插件作为 Composer 包提供，并且可以通过 Composer 安装。

composer require serkanalgur/cmb2-field-faiconselect

屏幕截图

用法

下载此仓库并将文件放入 wp-content/plugins/ 目录。当您启用插件时，您可以在 CMB2 中使用字段类型。

或者您可以在 WordPress 插件目录中搜索 CMB2 Field Type: Font Awesome。

使用 faiconselect 作为类型。例如；

$cmb->add_field( array(
    'name' => __( 'Select Font Awesome Icon', 'cmb' ),
    'id'   => $prefix . 'iconselect',
    'desc' => 'Select Font Awesome icon',
    'type' => 'faiconselect',
    'options' => array(
	'fa fa-facebook' => 'fa fa-facebook',
	'fa fa-500px'  	 => 'fa fa-500px',
	'fa fa-twitter'	 => 'fa fa-twitter'
    )
) );

之后，jQuery Font Picker 插件处理选择。

您还可以使用预定义的 Font Awesome 数组。我为此插件创建了一个函数 returnRayFaPre 供在 options_cb 中使用。

$cmb->add_field( array(
    'name' => __( 'Select Font Awesome Icon', 'cmb' ),
    'id'   => $prefix . 'iconselect',
    'desc' => 'Select Font Awesome icon',
    'type' => 'faiconselect',
    'options_cb' => 'returnRayFaPre'
) );

从模板文件夹中使用

下载并将文件夹放入您的主题文件夹。您需要创建一个函数来修复资产路径问题。例如；

// Fix for $asset_path issue
function asset_path_faiconselect() {
    return get_template_directory_uri() . '/path/to/folder'; //Change to correct path.
}

add_filter( 'sa_cmb2_field_faiconselect_asset_path', 'asset_path_faiconselect' );

//Now call faiconselect
require get_template_directory() . '/path/to/folder/iconselect.php'; //Again Change to correct path.

此函数解决了包括 JavaScript 和 CSS 文件时的资产路径问题。

使用 Font Awesome 5

您需要为激活 Font Awesome 5 添加两个不同的选项。您需要添加一个属性。还有一个函数用于预定义的 Font Awesome 列表。

标准方法

$cmb->add_field( array(
    'name' => __( 'Select Font Awesome Icon', 'cmb' ),
    'id'   => $prefix . 'iconselect',
    'desc' => 'Select Font Awesome icon',
    'type' => 'faiconselect',
    'options' => array(
        'fab fa-facebook' => 'fa fa-facebook',
        'fab fa-500px'  	 => 'fa fa-500px',
        'fab fa-twitter'	 => 'fa fa-twitter',
        'fas fa-address-book' => 'fas fa-address-book'
    ),
    'attributes' => array(
        'faver' => 5
    )
) );

此属性对于选择正确的样式文件是必需的。如果您不添加这些属性，则无法看到图标。

预定义方法

$cmb->add_field( array(
    'name' => __( 'Select Font Awesome Icon', 'cmb' ),
    'id'   => $prefix . 'iconselect',
    'desc' => 'Select Font Awesome icon',
    'type' => 'faiconselect',
    'options_cb' => 'returnRayFapsa',
    'attributes' => array(
        'faver' => 5
    )
) );

如您所见，我们定义了一个名为 returnRayFapsa 的 options_cb 函数。此函数创建了一个包含 solid 和 brands 图标的选项数组。您还需要 faver 属性用于 Font Awesome 5。

这就是所有的了 😄 欢迎贡献

您可以通过以下方式捐赠给我；

Paypal: https://paypal.me/serkanalgur

serkanalgur / cmb2-field-faiconselect

维护者

详细信息