fontIconPicker: Include an Elegant Icon Picker

Add an icon picker to your website forms with fontIconPicker.

This is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside administration forms. The list of icons can be loaded manually using a select field, an array or object of icons or directly from a Fontello config.json or IcoMoon selection.json file.

The plugin comes with plenty of configuration options:

  • Theme
  • Source
  • Empty Icon
  • Icons Per Page
  • Search
  • Attributes
  • Category Text

The added bonus with this plugin is that you can add your own theme with a few steps:

Using the theme parameter of the plugin settings, you can give custom classes to the icon picker and thereby change the appearance of individual pickers on the same page. For example if you pass theme: 'mytheme' then a class mytheme will be added to .icons-selector container. Then you can add custom styling using CSS selectors like .mytheme.icons-selector. For the sake of convention and to avoid CSS conflict, prefix your theme name with fip-. So the settings becomes theme: 'fip-mytheme' and CSS selector becomes .fip-mytheme.icons-selector.

This plugin is ready to go and compatible with the Firefox, Chrome, Internet Explorer and Opera browsers.