ineagu/wp-icon-picker

Icon Picker for WordPress

Icon Picker

Pick an icon of your choice.

Contributors: kucrut
Tags: icons, image, svg
Requires at least: 4.3
Tested up to: 4.7.2
Stable tag: 0.5.0
License: GPLv2
Donate Link: http://kucrut.org/#coffee

Description

An icon picker library plugin.

Screenshots

Icon selector

Icon fields in a post meta box using CMB

Frequently Asked Questions

How do I use css file from CDN?

You can use the icon_picker_icon_type_stylesheet_uri filter, eg:

/**
 * Load Font Awesome's CSS from CDN
 *
 * @param  string                $stylesheet_uri Icon type's stylesheet URI.
 * @param  string                $icon_type_id   Icon type's ID.
 * @param  Icon_Picker_Type_Font $icon_type      Icon type's instance.
 *
 * @return string
 */
function myprefix_font_awesome_css_from_cdn( $stylesheet_uri, $icon_type_id, $icon_type ) {
	if ( 'fa' === $icon_type_id ) {
		$stylesheet_uri = sprintf(
			'https://maxcdn.bootstrapcdn.com/font-awesome/%s/css/font-awesome.min.css',
			$icon_type->version
		);
	}

	return $stylesheet_uri;
}
add_filter( 'icon_picker_icon_type_stylesheet_uri', 'myprefix_font_awesome_css_from_cdn', 10, 3 );

Changelog

0.5.0

• Update Font Awesome to 4.7.0.
• Switch to Webpack.
• Various bug fixes and enhancements.

0.4.1

• Improve support for CMB: Make the field usable in a repeatable field.

0.4.0

• Introduce icon_picker_icon_type_stylesheet_uri filter hook.
• Font Awesome 4.6.1

0.3.0

• Fix CSS classname conflicts.

0.2.0

• Introduce icon_picker_field().
• Add support for CMB.

0.1.1

• Load translation, props Eduardo Larequi.

0.1.0

• Initial

wp-icon-picker's Issues

Duplication of field

When used as a single items the fields are being duplicated as the data format for this is an array with the type and icon keys, this when CMB calls display() when the field is displayed it loops through the singular field set so each key is classed as a value resulting intype and icon each being treated as there own fields. Wrapping this value in an array fixes the display.

WP 4.4 Compatilbility Issues

My Font Awesome icons settings got erased from menus during the last update. Also, after upgrading to WP 4.4 the icon "families" sidebar is gone and I can no longer select a icon set - the only ones available for selection are Dashicons, so I can't reapply the missing icons in my menus.

Switch to ESLint

Remove JSCS & JSHint, add ESLint

Improve Filtering

Usage on frontend

Hi, I'm busy with a new field type for Pods that uses this icon picker. All works fine except for frontend forms.
Although the loader class doesn't support non-admin pages I did a workaround to enqueue all scripts etc.
All modal scripts etc. are also loaded so one would think the icon picker should work fine.

I get the following messages:

Uncaught TypeError: Cannot read property 'selectIcon' of undefined
    at HTMLDivElement.g (icon-picker.min.js?ver=0.5.0:1)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
    at Object.trigger (jquery.js?ver=1.12.4:3)
    at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
    at HTMLDivElement.<anonymous> (jquery.js?ver=1.12.4:3)
    at Function.each (jquery.js?ver=1.12.4:2)
    at a.fn.init.each (jquery.js?ver=1.12.4:2)
    at a.fn.init.trigger (jquery.js?ver=1.12.4:3)
    at icon-picker.min.js?ver=0.5.0:1

The error below is only when you click on Select icon

Uncaught TypeError: Cannot read property 'frameTitle' of undefined
    at n.initialize (icon-picker.min.js?ver=0.5.0:1)
    at n.e.View (backbone.min.js?ver=1.2.3:1)
    at n.constructor (wp-backbone.min.js?ver=4.9.3:1)
    at n.constructor (media-views.min.js?ver=4.9.3:1)
    at n [as constructor] (backbone.min.js?ver=1.2.3:1)
    at n [as constructor] (backbone.min.js?ver=1.2.3:1)
    at n [as constructor] (backbone.min.js?ver=1.2.3:1)
    at new n (backbone.min.js?ver=1.2.3:1)
    at e (icon-picker.min.js?ver=0.5.0:1)
    at HTMLAnchorElement.c (icon-picker.min.js?ver=0.5.0:1)

Fatal on activation [WP_Styles()]

Hi,
I am using :

• Menu Icons v : 0.10.1
• WP v : 4.5.3
  When activating the plugin I have a fatal error, cf screenshot.
  
  I fixed it in the PR : #5

Still maintained?

Hi there, is this still maintained? Any plans to assure it works with jQuery 3.5 for WP 5.6 / 5.7 compatibility?

Remove Dev-lib

Font Awesome 4.7

Font Awesome 4.7.0

See http://fontawesome.io/icons/#new

Reconfigure Travis CI

Add PHPUnit as development dependency

See example: https://github.com/johnbillion/extended-cpts/

[Feature Request] Check if stylesheet is registered in theme/other plugin before register it

Hi, @kucrut.
I think that I have some improvement for your wp-icon-picker.

In my theme, i have icons "everywhere". To be precise:

• user can pick icon in Theme Options for different elements. Such as Social Icons widget, contact widget end etc.
• user can pick icon for menu elements via your beautiful wp-menu-icons
• user can create pages with shortcodes that have icons via WPBakery Visual Composer. Such as Headings with icons, Icon boxes and etc.

So, in all this cases — every plugin will wp_enqueue_style their own font-awesome version of stylesheet(of course, if they are all have the same style ID).
And the winner will be the one who makes it with highest priority.

Just in my case, wp-menu-icons overrides Visual Composer's font-awesome stylesheet.
So, I think it will be great to add wp_style_is check in Icon_Picker_Type_Font register_assets method

    public function register_assets( Icon_Picker_Loader $loader ) {
        if ( empty( $this->stylesheet_uri ) ) {
            return;
        }
        $register = true;
        $deps     = false;
        $styles   = wp_styles();
        if ( $styles->query( $this->stylesheet_id, 'registered' ) ) {
            $object = $styles->registered[ $this->stylesheet_id ];
            if ( version_compare( $object->ver, $this->version, '<' ) ) {
                $deps = $object->deps;
                wp_deregister_style( $this->stylesheet_id );
            } else {
                $register = false;
            }
        }
        if ( $register && wp_style_is( $this->stylesheet_id, 'registered' ) == false  ) {
            wp_register_style( $this->stylesheet_id, $this->stylesheet_uri, $deps, $this->version );
        }
        $loader->add_style( $this->stylesheet_id );
    }

In my own theme, i can just simply wp_deregister_style all unwanted stylesheets.
But I think it can be helpful for someone else.

Cheers!

P.S. When typing that comment, found that you use wp_style_is in add_style function here.
Edited issue.

Should use `font-awesome` instead of `fa` for the Font Awesome id/name

Using something just called fa doesn't give other plugins, themes, etc. the needed confidence to dequeue the included Font Awesome when they need to since there's plenty of stuff which might happen to be named fa. Meanwhile, calling it font-awesome leaves no wiggle room & would be recommended.

Also, this is a more standardized name which greatly reduces the change that Font Awesome's called more than once on a given site (ex. one plugin uses the more standard font-awesome name while this one uses fa so the site sees them as separate items which are then called when only one is actually needed.)

I don't see any downside to making this id more descriptive / standardized.

I have also posted about this on the WordPress.org support forum here: https://wordpress.org/support/topic/fontawesome-4-7-0/#post-9216454

Add custom icon sets

Hi @kucrut - It would be great to allow developers to add their own icon sets via filters, similar registration process to adding custom meta box fields would be ideal.

It appears that the current method of adding custom is to add your custom icon picker types into the plugin as the assets and classes are enqueued based on this line?

Switch to Webpack

Add PHPCS as development dependency