victor-valencia / bootstrap-iconpicker Goto Github PK
View Code? Open in Web Editor NEWA simple icon picker
Home Page: https://victor-valencia.github.com/bootstrap-iconpicker/
License: MIT License
A simple icon picker
Home Page: https://victor-valencia.github.com/bootstrap-iconpicker/
License: MIT License
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
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"
]
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!
Is it possible now or in the future to include custom icons created via iconmoon app or unicode?
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.
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!
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.
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.
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?
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?
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!
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.
Is this possible without reloading the script?
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();
});
Has anyone had any luck getting this to work with an AngularJS 1.x project ? Do you have any examples to share ?
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.
Do you have a plan to add support for fontawesome 5?
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?
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.
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.
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 ?
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.
issue on responsive:
on resize window, popover should be hidden.
fast fix:
$(window).on('resize', function() {
$('.iconpicker-popover').hide()
});
I can page to pages that don't exist. Paging buttons show disabled color & cursor, but on click they page to empty grid..
The btn-warning
class for the selected icon should remain in the markup on icon page navigation.
steps to reproduce:
btn-warning
class is present on the previously selected iconbtn-warning
class has been removedConfiguration for no icon?
Do you have plans to update the plugin?
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.
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.
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!
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.
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.
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,
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
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.
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.
CSS classes like .table-icons, .page-count, .icons-count should be prefixed with .iconpicker- to prevent conflicts.
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?
On div tag:
div disappears !
on div tag:
By click on glyphicon-adjust, it's ok.
It would be awesome if the iconpicker could handle a set of relative imagepaths instead of icons as well!
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'])
)
The iconset needs updating to FontAwesome 4.4.0.
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 ;-)
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:
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.
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 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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.