icon-picker-popup

tl;dr: go get it here: https://github.com/kmhcreative/icon-picker

WordPress plugin and theme options pages often use a jQuery “Color Picker” to make it easy for people to customize colors by just picking them from a small window with all the colors of the rainbow in it.

But what I wanted was a similar little window to pick a custom icon to display on a tab or button.  Icon fonts are becoming the preferred way to display an icon on a website button because font files are relatively small but are completely scaleable without getting blurry or fuzzy – a must when trying to support today’s high-density displays (like Apple’s “Retina” devices).

My first thought was to just launch the “thickbox” modal dialog window and build a Glyph Picker (like the one in Adobe Illustrator) within it.  Actually that proved really easy to do (way easier than I thought) but Javascript is ok if you’re just using ASCII character codes, it sucks for UNICODE ones.  If I was using a font that simply replaces regular ASCII characters with little pictures it was fine.  But that isn’t how modern icon fonts work.

The new icon fonts are superior to the old-school “webdings,” “wingdings,” “dingbats” or even custom ones like “Entypo” or “WebSymbols.”  As I just said, those fonts tend to just replace ASCII character codes with little images in place of the normal alphanumeric characters.  That is a problem for accessibility support because screen readers for the vision impaired don’t know that it is supposed to be an image and will read the ASCII character.  The new icon fonts avoid this problem by not replacing those characters, and instead use higher UNICODE values.

The latest version of WordPress just got a major facelift on the back-end Admin screens, which now use an icon font called “Dashicons.”  Last year’s default WordPress theme, “Twenty Thirteen,” also used an icon font which is called “Genericons.”  But many theme builders have been using “Font Awesome” for a while now.  These, arguably, represent the three, current, most popular icon fonts for use in WordPress.  I didn’t actually count them, but I think that’s collectively about 600 icons.  If you can’t find the perfect image for your button or tab you’re probably out of luck.

After a bit of Googling I found “Dashicons Picker” by Brad Vincent, which was damn close to what I wanted.  However, while I feel pretty comfortable with raw Javascript, jQuery still throws me for a loop.  So it took me the better part of two days to figure out how to modify his code so it would support multiple font families from a drop-down list, update the preview/selectors, allow you to search within whatever font was currently loaded, then save both font family and icon choice, and show you the actual font you selected ON the button you use to open the picker.

Following the lead of the project altered I also included an example WordPress plugin to show how hit works – but the real intention is that “Icon Picker” is something you can drop into your own plugin or theme and invoke it in a manner similar to how the jQuery “Color Picker” included with WordPress already works:

icon-picker-plugin

CONTRIBUTE!

Octocat_smallIcon Picker is intended as something you can drop into your own plugins or themes for use on your Options/Settings page.  It’s pretty easy to add support for additional fonts just by adding them to the “icons” array at the head of the “icon-picker.js” file.  But this project started for me when I found the “Dashicons Picker” and wanted it to support other fonts and actually show me a preview of the icon I selected instead of a class name.  So if my Icon Picker doesn’t do something you want it to, or aims to misbehave, feel free to contribute or fork it from the repository at GitHub: https://github.com/kmhcreative/icon-picker