Is it possible now or in the future to include custom icons created via iconmoon app or unicode?

The class disabled only affects the styling of the buttons: the buttons continue to function. I added the following lines to the end of the updateButtonBar function to add the disabled attribute:

(page == 1) ? btn_prev.attr('disabled', 'disabled'): btn_prev.removeAttr('disabled');
(page == total_pages) ? btn_next.attr('disabled', 'disabled'): btn_next.removeAttr('disabled');


This makes sure I can't navigate off the end of the icon selection pages (pageNum <= 0 || pageNum > numPages)

I use
var container = $this.data('container') == '' ? 'body' : $this.data('container');

 $this.popover({
                            animation: false,
                            trigger: 'manual',
                            html: true,
                            content: op.table,
                            container: container,
                            placement: op.placement
                        }).on('shown.bs.popover', function () {
                            data.switchPage(op.icon);
                            data.bindEvents();
                        });

issue on responsive:
on resize window, popover should be hidden.

fast fix:

$(window).on('resize', function() { 
	$('.iconpicker-popover').hide()
});

Right now, it appears that the user is restricted to only using one iconset at a time. Is there any way to use multiple iconsets at the same time? (For example, passing in an array in .iconset(['font-awesome','octicons']))

CSS classes like .table-icons, .page-count, .icons-count should be prefixed with .iconpicker- to prevent conflicts.

Hello,

iconpicker go beyond its icon limit

http://screencast.com/t/4uuvcciWu14p

when I click on this negative value appears. I think last previous icon should appear or don't go negative at all

thank you

I can page to pages that don't exist. Paging buttons show disabled color & cursor, but on click they page to empty grid..

Please update npm package.

When I download from npm the version is 1.8.2, but the current is 1.9.0.

I add support for Fontawesome 5 and Bootstrap 4.

Hello, the plugin is promising and possibly the best in its kind.
I have a problem like I do for the cloned iconpicker to work correctly, here's the example:
https://jsfiddle.net/iLen/r87e5nh5/1/

help.

Do you have plans to update the plugin?

The license file at the root of the repo is for the MIT license, as is the readme, and bower.json - but Javascript files contain a title block with the Apache 2.0 license.

I suggest one is chosen and applied across the repo.

Hi. I am trying to make the iconpicker to work with webpack but seems like it does not. Here is the code I am using:

require('../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css');
require("imports?jQuery=jquery!../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-glyphicon.min.js")
require('imports?jQuery=jquery!../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js');

... 

$('.btn-iconpicker').iconpicker();

I am getting the following error when clicking on the buttons:

bootstrap-iconpicker.min.js:22 Uncaught TypeError: $this.popover is not a function
bootstrap-iconpicker.min.js:22 Uncaught TypeError: $(...).popover is not a function

Hello,
Nice plugin for button builder.
I just wanted to know whether it is possible to add a search box on top of iconpicker, that allows to search through available icons.
This feature will be a good addon to this plugin.

Thanks in advance.

Maybe it's too complex to implemrnt, so, now it's just like a dream. I think it could be useful to have a possibitity to add additional tags(aliases), which can be used for searching icons. Because:

1. One icon can have several meanings (or can be described by different words)
2. It can be used for i18n. Now we can search only in English

G'day,

Loving your project and I am finding it very useful.

However I have one small problem. I'm using bootbox (a boostrap based dialog utility) to display a dialog to ask the user to select some information. Within the dialog I'm using your project, bootstrap-iconpicker.

However if the user selects to close the dialog (via the close button) without closing the iconpicker, then the iconpicker remains.

If there was a way that I could destroy the popup manually then I could destory any popups when the dialog close option is triggered.

Cheers,
James.

Is this possible without reloading the script?

The btn-warning class for the selected icon should remain in the markup on icon page navigation.

steps to reproduce:

• choose an icon from the picker
• reopen the picker
• the btn-warning class is present on the previously selected icon
• navigate to another page with the arrows
• navigate back to the previous page with the arrows
• the btn-warning class has been removed

Hello. I think I found an issue. I am using a custom iconset with an empty first icon (empty string), as follows:

$('#mypicker').iconpicker({
    iconset: {
        iconClass: 'icomoon',
        iconClassFix: '',
        icons: [" ", "icon-youtube", "icon-linkedin", "icon-pinterest"],
    },
});

When I click the button to open the icon picker, the following shows up in the console:

Uncaught Error: Syntax error, unrecognized expression: i.    jquery-1.11.0.min.js:2
db.error              @ jquery-1.11.0.min.js:2
ob                    @ jquery-1.11.0.min.js:2
db                    @ jquery-1.11.0.min.js:2
n.fn.extend.find      @ jquery-1.11.0.min.js:2
Iconpicker.switchPage @ bootstrap-iconpicker.js:171
(anonymous function)  @ bootstrap-iconpicker.js:476
n.event.dispatch      @ jquery-1.11.0.min.js:3
r.handle              @ jquery-1.11.0.min.js:3
n.event.trigger       @ jquery-1.11.0.min.js:3
e.event.trigger       @ jquery-migrate-1.2.1.min.js:2
(anonymous function)  @ jquery-1.11.0.min.js:3
n.extend.each         @ jquery-1.11.0.min.js:2
n.fn.n.each           @ jquery-1.11.0.min.js:2
n.fn.extend.trigger   @ jquery-1.11.0.min.js:3
r                     @ bootstrap.min.js:6
b.show                @ bootstrap.min.js:6
(anonymous function)  @ bootstrap.min.js:6
n.extend.each         @ jquery-1.11.0.min.js:2
n.fn.n.each           @ jquery-1.11.0.min.js:2
a.fn.popover          @ bootstrap.min.js:6
(anonymous function)  @ bootstrap-iconpicker.js:480
n.event.dispatch      @ jquery-1.11.0.min.js:3
r.handle              @ jquery-1.11.0.min.js:3

Is there a proper way to add an empty icon? What am I doing wrong? I'm using version 1.7.0.

How is it possible to reset the Icon picker?
I want to set during the runtime another icon.

I see it's possible with: .iconpicker('setIcon', 'fa-wifi')
The problem here is the icon picker doesn't shows the selected icon page.

I've done several trials to reset it via:

1.) .iconpicker('reset')
2.) Initialize via JS and clear content before:

$('#editCategoryIcon').empty().iconpicker({
  align: 'left',
  footer: false,
  icon: icon,
  iconset: 'fontawesome',
  rows: 5,
  search: true,
  searchText: 'Suchen...'
});

But I can't figure it out, any ideas?

This is a great plugin indeed. I just wanted to know that if this supports Bootstrap 3.3 as well? Also do you plan to update the fontawesome js file to version 4.3?

Thanks!

hello i am trying to add it in joomla but i have this error
bootstrap-iconpicker.min.js:11 Uncaught TypeError: Cannot read property 'tip' of undefined
at HTMLButtonElement. (bootstrap-iconpicker.min.js:11)
could you help me ?

Has anyone had any luck getting this to work with an AngularJS 1.x project ? Do you have any examples to share ?

Hi there,

Is there any intention that FA5 will supported? It's in Alpha 4 right now, so it shouldn't take any longer than August for them to release. Will it be officially supported?

Do you have a plan to add support for fontawesome 5?

The iconset needs updating to FontAwesome 4.4.0.

I import files without vue files and it works. but when I want import vue files. bootstrap-iconpicker is not worked and don't show any errors on console?
what can I do?

I initialize the iconpicker like this in JS:

$('#iconPick').iconpicker({
                    search: false,
                    cols: 6,
                    rows: 1,
                    icon: 'fa-folder',
                    iconset: { iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] },
                    //iconset: { iconClass: 'fontawesome', iconClassFix: 'fa-', icons: [ 'folder', 'book' ] },
                    placement: 'bottom',
                    selectedClass: 'btn-success',
                    unselectedClass: ''
                });

If I comment the glyphicon/iconset part out and then include the fontawesome/iconset part the icons do not show in the picker popup.

Am I doing something wrong?

It would be awesome if the iconpicker could handle a set of relative imagepaths instead of icons as well!

It would be nice to find bootstrap-iconpicker in NPM; so it make it use easily by most of web developers.
And it's free for open source ;-)

Hi @victor-valencia ,
We are cdnjs team, we want to host this project in cdnjs.
Could you please tell me if the files under bootstrap-iconpicker/js/iconset/ need to be added in cdnjs? Thank you.

cdnjs/cdnjs#8052

on div tag:

1. enter glyphicon-adjust on search field

By click on glyphicon-adjust, it's ok.

https://github.com/victor-valencia/bootstrap-iconpicker/blob/master/bootstrap-iconpicker/js/bootstrap-iconpicker.js#L510

I have 20-30 icon pickers on page.

And in my case I see in profiler that when I click on body this handler take 50-60ms.

It is possible to reduce this time to 2-3ms if we will just not run $(this).popover('destroy'); for each iconpicker, and will run it only for icon picker that is opened.

Configuration for no icon?

Hi,

Awesome iconpicker. However, I tried to use it inside a datatable, but it's not rendering at all (it's just a box if using button, if div, nothing renders). Just want to know if this is possible?

Thanks!

1. In the first place, I try to set the iconPicker by javascript, using setIcon function.

If the iconPicker is filtered (with search box) and the desired icon is not in the filtered array, it will be selected the first icon from the filtered array.

I tried to reset the component (with reset function) before setting the new icon and it worked, but after that, if I use it like this 8-10 times, the whole webpage goes very slow (because of increased memory used by browser (IE) ).

.2. It would be a great thing to have a "noIconClass" (which could be defined by user) for the situation when we have no icon selected. For now, if no icon is selected, it will be selected the first icon from the array as default and this could be confusing.
(Later i saw that USvER pointed the same thing, but I think it could be added by default)

.3. Setting a iconset via data attributes (role="iconpicker" ) is not working if is used a custom iconset (data-iconset="myIconset") even if this custom iconset object is loaded before bootstrap-iconpicker.min.js.
Custom iconset could be used only in javascript.

Great Component by the way (in my opinion the best of his kind)
Thank you!

I'd suggest you to start using Semantic Versioning Specification (SemVer, http://semver.org/) on your release tags.

I have registered your repository on Bower's (http://bower.io) registry to install bootstrap-iconpicker through bower CLI and actually we can only use master branch (which tends to be unstable) since Bower's registry works based on SemVer spec.

I'd also suggest you put a bower.json manifest file on your project to better identify bootstrap-iconpicker on Bower's registry.

Is there an option to disabled the header and footer labels? I simply want to show the icons.

If all the icons fit into a single page -- can the left and right arrow be hidden?

All my icons fit on a single 10x10 row and col.

Thanks!

Good day!

I absolutely love your project and am busy implementing it in a custom thumbnail designer.

A feature request that I have would be to include the functionality to allow for generically converted fonts. This one feature will open up the tool for a number of additional use cases.

Allow me to elaborate:

I want to be able to take a font such as this: and convert it into a font that could be usable in the iconpicker. Interestingly, this font is from 1996 but is essentially an icon font by definition.

By using http://www.flaticon.com/font-face to convert the old font I am able to get a proper @font-face css out.

Would it not be possible to then include this (or any converted font) as a new font set?

I'm very new to web development but am willing to help where I can.

Bootstrap Iconpicker has the option to provide custom iconsets, which I'm using to implement support of picking icons of FatCow Web Icons. Basically I've created a CSS file w/ rules for showing all PNG images through "background-image" property, and this way, now I can choose not only 16x16 icons, but 32x32 as well.

It's working fine since you use only one kind of custom iconsets. When I have two iconpicker fields, each with a different iconset (the first one loads 16x16 icons and the second one 32x32 icons), the icon list of the second field overwrites the first one. This results in both fields showing the same total iconsets, which is not true.

This library is great and has potential to become even better. It'd be great if this bug becomes fixed.

Hello, I have a problem every time I press the "Prev" or "Next" button again, it will go away, which could be causing this error?
Take the example in a clean .html with just the necessary references.
Video: http://recordit.co/kYTM1dsIIv

You shouldn't require glyphicon be included in a page that wants a selector for Font Awesome icons. I modified the createButtonBar function as follows:

Iconpicker.prototype.createButtonBar = function(){
...
var btn = $('<button class="btn btn-primary"><span class="glyphicon"></span></button>');
if (op.iconset === "fontawesome") { btn.children().attr("class", "fontawesome") }
var td = $('<td class="text-center"></td>');
if(i == 0 || i == op.cols - 1){
...
btn.addClass((i==0) ? 'btn-previous': 'btn-next');
if (op.iconset === "fontawesome") {
btn.find('span').addClass( (i == 0) ? 'fa fa-arrow-left': 'fa fa-arrow-right');
} else {
btn.find('span').addClass( (i == 0) ? 'glyphicon-arrow-left': 'glyphicon-arrow-right');
}
...
};


This change allows the icons diplayed for navigation to be the same as the iconset the selector is being used for.

On div tag:

1. select a icon
2. click next button

div disappears !

I would like to use the iconpicker in a form to pick the icon for a user. In the (rails) backend, I need the character, though, instead of the css class.

My current iconpicker:

<button type="button" class="btn btn-default" role="iconpicker" name="user[icon]"></button>

A typical icon:

.myicon-typical:before{content:"\e6bd"}

When submitting the form, the icon gets delivered as the css-class “myicon-typical”, instead of the character. Is it possible to configure the iconpicker to send the character instead? Am I going at this from the wrong angle?

When integrating the plugin (which is awesome btw) in a bower managed project, the references are not automatically added in my index.html. Workaround on my side (for fontawesome only) is adding this to the project's bower.json :

  "main": [
    "bootstrap-iconpicker/js/bootstrap-iconpicker.js",
    "bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.2.0.js",
    "bootstrap-iconpicker/css/bootstrap-iconpicker.css"
  ]

It seems as though this library is not compatible with WordPress. Is this intentional or is there some special setup I need to do? I was able to get the icon picker to work on a single page html doc, but within WordPress the icon picker is never getting initialized. When I inspect the button DOM element it never gets updated to include the icon picker class or the appended <i> tags. Here is what I see after the page loads:

<button class="btn btn-default" role="iconpicker"></button>

This is the same as the html code I have in my source file. I really like this library and I think its a great addition to the bootstrap button dropdown, so it would be great if it was compatible with WordPress.

Thanks for your help.

If we have iconpickers on a page, and subsequently load an iconpicker into a modal - then the existing iconpickers all emit a "change" event which causes icons to be inserted all over their target text fields.

It is fired when the javascript is loaded into the modal window - a requirement in my case as it is remote content for a bootstrap modal.

If you set the iconpicker to have no default icon - it does not fire.

However if you change an iconpicker to having an icon - it fires when the javascript is loaded into the modal.

Hi,

I tried to integrate it with WordPress. The Iconpicker works good in plain HTML file, but opens empty Popup with no icons in WordPress. There is no problem whatsoever with the jQuery integration or conflict as such. But it seems the icons from "bootstrap-iconpicker-iconset-all.js" into popup.

Has someone integrated it with WordPress or any other Framework? What can be the problem? To me, it looks like something needs to be changed in the way the icon-set arrays are maintained; but I'm not jQuery master; please guide me to resolve this issue.

Thanks!

Ruturaaj.