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