{"id":13547876,"url":"https://github.com/micc83/fontIconPicker","last_synced_at":"2025-04-02T20:30:56.655Z","repository":{"id":14460185,"uuid":"17172023","full_name":"micc83/fontIconPicker","owner":"micc83","description":"🌈 jQuery fontIconPicker v2 is a small (3.22kb gzipped) jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms.","archived":false,"fork":false,"pushed_at":"2020-09-01T07:27:17.000Z","size":2449,"stargazers_count":265,"open_issues_count":0,"forks_count":87,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-29T07:38:54.758Z","etag":null,"topics":["font-icons","fontello","icon-picker","jquery-fonticonpicker","jquery-plugin"],"latest_commit_sha":null,"homepage":"http://micc83.github.io/fontIconPicker/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/micc83.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-25T12:19:57.000Z","updated_at":"2025-02-26T09:54:49.000Z","dependencies_parsed_at":"2022-08-07T08:00:16.751Z","dependency_job_id":null,"html_url":"https://github.com/micc83/fontIconPicker","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micc83%2FfontIconPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micc83%2FfontIconPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micc83%2FfontIconPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micc83%2FfontIconPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micc83","download_url":"https://codeload.github.com/micc83/fontIconPicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246828498,"owners_count":20840474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-icons","fontello","icon-picker","jquery-fonticonpicker","jquery-plugin"],"created_at":"2024-08-01T12:01:02.559Z","updated_at":"2025-04-02T20:30:56.624Z","avatar_url":"https://github.com/micc83.png","language":"HTML","funding_links":[],"categories":["HTML","JavaScript"],"sub_categories":[],"readme":"jQuery fontIconPicker v3.0 is out\n==============\nVersion 2.0 of jQuery fontIconPicker will no more receive updates nor support. You can find **Version 3.0** right here:\n\n[Click here to get jQuery fontIconPicker v3.0](https://github.com/fontIconPicker/fontIconPicker)\n\njQuery fontIconPicker v2.0\n==============\n\njQuery fontIconPicker is a small (`3.22KB` 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](http://micc83.github.io/fontIconPicker/) for examples and documentation.\n\n**Notice** : Many of the features introduced with release 2.0.0 were the result of a collaboration. Unfortunately the developer of those features is not actively following the project anymore so you're more than welcome to step in. The problem is that since version 1.0.0 jQuery fontIconPicker has grown much and it's not mantainable anymore without writing first a carefully drafted test suite. So the first stage of any collaboration would be about writing unit and integration testing for everything implemented up to now (I know it's a pain in the ...). **Until then unfortunately It won't be possible to me to address any bug or add new features.** Thx for the understanding.\n\n![fontIconPickers](/demo/github-img.png)\n\n## How it works\n Just include a copy of jQuery, the fontIconPickers script, the fontIconPickers theme and your Font Icons. Now you can trigger it on a `SELECT` or `INPUT[type=\"text\"]` element.\n\n### Include the JavaScript\n ```html\n \u003c!-- jQuery --\u003e\n\u003cscript type=\"text/javascript\" src=\"jquery-1.7.1.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- fontIconPicker JS --\u003e\n\u003cscript type=\"text/javascript\" src=\"jquery.fonticonpicker.min.js\"\u003e\u003c/script\u003e\n```\n\n### Include the CSS\n```html\n\u003c!-- fontIconPicker core CSS --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"jquery.fonticonpicker.min.css\" /\u003e\n\n\u003c!-- required default theme --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"themes/grey-theme/jquery.fonticonpicker.grey.min.css\" /\u003e\n\n\u003c!-- optional themes --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css\" /\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css\" /\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"themes/inverted-theme/jquery.fonticonpicker.inverted.min.css\" /\u003e\n```\n\n### Include Font Icons\n```html\n\u003c!-- Font --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"fontello-7275ca86/css/fontello.css\" /\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"icomoon/icomoon.css\" /\u003e\n```\n\n### Initialize with jQuery\nFinally call the fontIconPicker on a `SELECT` or `INPUT[type=\"text\"]` element.\n\n```html\n\u003c!-- SELECT element --\u003e\n\u003cselect id=\"myselect\" name=\"myselect\" class=\"myselect\"\u003e\n\t\u003coption value=\"\"\u003eNo icon\u003c/option\u003e\n\t\u003coption\u003eicon-user\u003c/option\u003e\n\t\u003coption\u003eicon-search\u003c/option\u003e\n\t\u003coption\u003eicon-right-dir\u003c/option\u003e\n\t\u003coption\u003eicon-star\u003c/option\u003e\n\t\u003coption\u003eicon-cancel\u003c/option\u003e\n\t\u003coption\u003eicon-help-circled\u003c/option\u003e\n\t\u003coption\u003eicon-info-circled\u003c/option\u003e\n\t\u003coption\u003eicon-eye\u003c/option\u003e\n\t\u003coption\u003eicon-tag\u003c/option\u003e\n\t\u003coption\u003eicon-bookmark\u003c/option\u003e\n\t\u003coption\u003eicon-heart\u003c/option\u003e\n\t\u003coption\u003eicon-thumbs-down-alt\u003c/option\u003e\n\t\u003coption\u003eicon-upload-cloud\u003c/option\u003e\n\t\u003coption\u003eicon-phone-squared\u003c/option\u003e\n\t\u003coption\u003eicon-cog\u003c/option\u003e\n\t\u003coption\u003eicon-wrench\u003c/option\u003e\n\t\u003coption\u003eicon-volume-down\u003c/option\u003e\n\t\u003coption\u003eicon-down-dir\u003c/option\u003e\n\t\u003coption\u003eicon-up-dir\u003c/option\u003e\n\t\u003coption\u003eicon-left-dir\u003c/option\u003e\n\t\u003coption\u003eicon-thumbs-up-alt\u003c/option\u003e\n\u003c/select\u003e\n\u003c!-- JavaScript --\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t// Make sure to fire only when the DOM is ready\n\tjQuery(document).ready(function($) {\n\t\t$('#myselect').fontIconPicker(); // Load with default options\n\t});\n\u003c/script\u003e\n```\n\n```html\n\u003c!-- INPUT element --\u003e\n\u003cinput type=\"text\" name=\"mytext\" id=\"mytext\" /\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\tjQuery(document).ready(function($) {\n\t\t$('#mytext').fontIconPicker({\n\t\t\tsource:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],\n\t\t\temptyIcon: false,\n\t\t\thasSearch: false\n\t\t});\n\t});\n\u003c/script\u003e\n```\n\n## Plugin Options\nHere's fontIconPicker options:\n```js\nvar $picker = $('.picker').fontIconPicker({\n\ttheme             : 'fip-grey',              // The CSS theme to use with this fontIconPicker. You can set different themes on multiple elements on the same page\n\tsource            : false,                   // Icons source (array|false|object)\n\temptyIcon         : true,                    // Empty icon should be shown?\n\temptyIconValue    : '',                      // The value of the empty icon, change if you select has something else, say \"none\"\n\ticonsPerPage      : 20,                      // Number of icons per page\n\thasSearch         : true,                    // Is search enabled?\n\tsearchSource      : 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\n\tuseAttribute      : false,                   // Whether to use attribute selector for printing icons\n\tattributeName     : 'data-icon',             // HTML Attribute name\n\tconvertToHex      : 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)\n\tallCategoryText   : 'From all categories',   // The text for the select all category option\n\tunCategorizedText : 'Uncategorized'          // The text for the select uncategorized option\n});\n```\n\n## Plugin APIs\nfontIconPicker provides three public APIs to manipulating the icon picker.\n\n### setIcons( `Array|Object` newIcons, `Array|Object` iconSearch )\n Use this method to dynamically change icons on the fly. `newIcons` and `iconSearch` (optional) have same datatypes as `source` and `searchSource` options.\n\n```js\n$picker.setIcons(['icon-one', 'icon-two']);\n$picker.setIcons(['icon-one', 'icon-two'], ['Icon one will be searched by this', 'Icon two will be searched by this']);\n```\n\n### destroyPicker()\nUse this to remove the icon picker and restore the original element.\n\n```js\n$picker.destroyPicker();\n```\n\n### refreshPicker( `Object|Boolean` newOptions )\nRefresh 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.\n\n```js\n$picker.refreshPicker({\n\ttheme: 'fip-bootstrap',\n\thasSearch: false\n});\n```\n\nOptions and APIs are discussed in details with live examples at the project page.\n\n### Important notes for local demo\n\nOnly 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.\n\n## Browser Compatibility\n\njQuery iconPicker has been successfully tested on: Firefox (edge), Safari (edge), Chrome (edge), IE8+ and Opera (edge).\n\n## Credits\n\njQuery fontIconPicker has been made by [me](https://github.com/micc83) \u0026 [swashata](https://github.com/swashata). You can contact me at micc83@gmail.com or [twitter](https://twitter.com/Micc1983) for any issue or feauture request.\n\nI really have to thank miniMAC for the idea, Zeno Rocha for jQuery plugin boilerplate, Dave Gandy \u0026 KeyaMoon for the beautiful sets of icons and Elliot Condon for the amazing Advanced Custom Field WordPress plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicc83%2FfontIconPicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicc83%2FfontIconPicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicc83%2FfontIconPicker/lists"}