jQuery Plugin which allows you to include a simple icon picker with search and pagination inside your administration forms.
npm install @fonticonpicker/fonticonpickerjQuery fontIconPicker v3.1.1    
==============================
jQuery fontIconPicker is a small (4.05KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your 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. Go to the official plugin page for examples and documentation.
fontIconPicker _v3.x_ supports jQuery 1.12.4 through 3.3.0.
> Originally developed at micc83/fontIconPicker and now moved into separate organization for better collaboration.
fontIconPicker has been released over NPM. So you can either use NPM to install or download a release.
``bash`
npm install jquery@1.12.4 @fonticonpicker/fonticonpicker --save
Now use with webpack or browserify.
`js
const jQuery = require( 'jquery' );
const fip = require( '@fonticonpicker/fonticonpicker' )( jQuery );
jQuery( '.selector' ).fontIconPicker( {
// Options
} );
`
You can put fontIconPicker dependencies directly in your html with
`
If you wish to use ES6 module, then you have to initialize manually.
`js
import jQuery from 'jquery';
import initFontIconPicker from '@fonticonpicker/fonticonpicker';
// Initiate the jQuery plugin
initFontIconPicker( jQuery );
jQuery( '.selector' ).fontIconPicker( {
// Options
} );
`
Right now, the only feasible way to properly initiate fontIconPicker throughinitFontIconPicker
rollupjs is to pass jQuery directly in the function. If
you know a better way, feel free to suggest.
or INPUT[type="text"] element.$3
`html
`$3
html
`$3
html
`$3
Finally call the fontIconPicker on a or INPUT[type="text"] element.`html
`html
`Plugin Options
Here's fontIconPicker options:
js
var $picker = $('.picker').fontIconPicker({
theme : 'fip-grey', // The CSS theme to use with this fontIconPicker. You can set different themes on multiple elements on the same page
source : false, // Icons source (array|false|object)
emptyIcon : true, // Empty icon should be shown?
emptyIconValue : '', // The value of the empty icon, change if you select has something else, say "none"
autoClose : true, // Whether or not to close the FIP automatically when clicked outside
iconsPerPage : 20, // Number of icons per page
hasSearch : true, // Is search enabled?
searchSource : false, // Give a manual search values. If using attributes then for proper search feature we also need to pass icon names under the same order of source
appendTo : 'self', // Where to append the selector popup. You can pass string selectors or jQuery objects
useAttribute : false, // Whether to use attribute selector for printing icons
attributeName : 'data-icon', // HTML Attribute name
convertToHex : true, // Whether or not to convert to hexadecimal for attribute value. If true then please pass decimal integer value to the source (or as value="" attribute of the select field)
allCategoryText : 'From all categories', // The text for the select all category option
unCategorizedText : 'Uncategorized', // The text for the select uncategorized option
iconGenerator : null, // Icon Generator function. Passes, item, flipBoxTitle and index
windowDebounceDelay: 150, // Debounce delay while fixing position on windowResize
searchPlaceholder : 'Search Icons' // Placeholder for the search input
});
`Plugin APIs
fontIconPicker provides three public APIs to manipulating the icon picker.$3
Use this method to set an icon programmatically.
js
$picker.setIcon( 'fa fa-arrow-down' );
`$3
Use this method to dynamically change icons on the fly. and iconSearch (optional) have same datatypes as source and searchSource options.`js
$picker.setIcons(['icon-one', 'icon-two']);
$picker.setIcons(['icon-one', 'icon-two'], ['Icon one will be searched by this', 'Icon two will be searched by this']);
`$3
Use this method to programmatically set pagination in the fip popup. This
persists between open and close state until user has changed pagination manually.
js
$picker.setPage( 2 );
$picker.setPage( 'first' );
$picker.setPage( 'last' );
`Method accepts numbers and only two special strings.
* Number corresponds to the page number starting from 1.
*
will set the pagination to first page.
* last will set the pagination to last page.$3
Use this to remove the icon picker and restore the original element.`js
$picker.destroyPicker();
`$3
Refresh the icon picker from DOM or passed options. Useful when DOM has been changed or reinitializing after calling the destroy method or changing the options values.js
$picker.refreshPicker({
theme: 'fip-bootstrap',
hasSearch: false
});
`$3
Reposition picker dropdown in the window. Use this if DOM has changed and dropdown
is open. Or if your picker is inside a scrolling container.
js
var picker = $('.myselect').fontIconPicker();
$('.mycontainer').on( 'scroll', function() {
picker.repositionPicker();
} );
`Options and APIs are discussed in details with live examples at the
project page.
$3
Only when loading demo locally: In firefox fontIconPicker icons won't be shown correctly because of CORS. For the same reason "Load icons from Fontello JSON config file" won't work on Chrome or IE 10. If you need to do some local testing you can disable strict_origin_policy at your risk.
Use the bundled Browsersync server to run the demo instead. See Setup to learn how.
Browser Compatibility
jQuery iconPicker has been successfully tested on: Firefox (edge), Safari (edge), Chrome (edge), IE8+ and Opera (edge).
jQuery Compatibility
>= 1.12.4 has been set as peerDependencies in the package.json. We have
tested with 1.x and 3.x branch. jQuery Migrate doesn't produce any error when
using with 3.x.Development Environment
If you want to contribute keep a few things in mind.
* Any code shouldn't produce any error with ESLint and Stylelint. We check for errors
during build and if it does produce any error, then it will be rejected.
* All new JS code should have unit or integration test implemented with jest.
$3
First make sure Node >= v8 is installed. Then clone the repository
`bash
git clone git@github.com:fontIconPicker/fontIconPicker.git
`and run
bash
cd fontIconPicker
npm install
npm install -g npx
`Which will install all dependencies. You do not need to install
as it
is defined in devDependencies.Now edit the files in
src as needed and while you do, run`bash
npx gulp serve
`This will serve the changes live in your browser. Access it through
.$3
* All additional modules should go inside
src/js/modules with unit tests in
__tests__/unit.
* Write JS in ES6. This is
a great place to learn. It will be compiled with babel on the go.
* Do not write CSS files directly. Write SCSS. It will
be compiled when npx gulp serve is running.
* If you are writing a theme, include in the first box of demo/index.html.
* If you are writing an option or API, include in a separate box of demo/index.html.
* All new JS features should have unit/integration and/or e2e tests. We use cypress for e2e tests and jest for unit/integration tests.$3
When you run
npm install for the first time, husky setups a few git hooks. It specifically
does two things.1. Checks for proper commit message.
2. Runs linting of
js and scss files to avoid any error before push.$3
Additionally we run test suits for each push on travis ci.
Make sure it passes by running
`bash
npm run test
` tests.$3
fontIconPicker has two sets of tests.
#### Unit & Integration test with jest
`bash
npx jest
`#### End2End test with cypress
bash
npx cypress open
`Then run the tests from the app. Or
bash
npx cypress run
`To run the tests in the terminal from a headless browser. You do not need to
worry about setting up test environment as it is taken care of automatically
by cypress.
$3
*
- Builds all scripts/styles and put them in dist folder.
* build - Same as default.
* lint - Lint all CSS and JS files.
* lint:script - Lint all JS files.
* lint:style - Lint all SCSS files.
* fonts - Copy font files to dist directory.
* serve - Build the files, init browsersync and watch files to create dev env.npx`.jQuery fontIconPicker has been made by Alessandro Benoit & swashata. You
can use the issue tracker for reporting bugs or feature requests.
> Special thanks to miniMAC for the idea, Zeno Rocha for jQuery plugin boilerplate, Dave Gandy & KeyaMoon for the beautiful sets of icons and Elliot Condon for the amazing Advanced Custom Field WordPress plugin.