Home

Awesome

CMB2 Field Type: Font Awesome

Font Awesome Icon Selector for CMB2

FOSSA Status

Description

Font Awesome icon selector for powerful custom metabox generator CMB2

You can use as field type in CMB2 function file. Add a new field, set type to faiconselect and add font awesome icons to options (look Usage for examples). Plugin uses jQuery Font Picker for creating a icon selector.

Plugin capable to use Font Awesome 4.7.0 or 5.7.2 (only Solid and Brands icons) for icons and selector.

WordPress Plugin

You can download this plugin also here : CMB2 Field Type: Font Awesome or you can search as CMB2 Field Type: Font Awesome on your plugin install page.

Install via Composer

This plugin available as Composer Package and can be installed via Composer.

composer require serkanalgur/cmb2-field-faiconselect

ScreenShot

Image

Usage

Download this repo and put files into wp-content/plugins/ directory. When you enable plugin, you can use field type in CMB2.

Alternatively you can search CMB2 Field Type: Font Awesome on WordPress plugin directory.

Use faiconselect for type. For Example;

$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'
    )
) );

After that jQuery Font Picker plugin handle the select.

Aslo you can use predefined array for Font Awesome. I created a function with this addon to use in options_cb. Function called as returnRayFaPre.

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

Usage From Template Folder

Download and place folder into your theme folder. You need to create a function for fixing asset path issue. Fore example;

// 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.

This function solve assetpath issue for including javascript and css files.

Usage With Font Awesome 5

You need two different options for activate Font Awesome 5. You will need to add an attribute. Also there is a function for predefined list of font-awesome :smile:

Standart Way

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

This attribute needed for selecting right style files. If you don't add these attribute, you can not see icons.

Predefined Way

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

As you can see we define an options_cb function named returnRayFapsa. This function create an array for options with solid and brands icons. Also you need faver attribute for Font Awesome 5.

That's All for now :smile: Contributions are welcome

You can donate me via;

Paypal : https://paypal.me/serkanalgur

License

FOSSA Status