Iconpicker for Bootstrap 3.0 - use custom font set

Question

Iconpicker for Bootstrap 3.0 only uses the default icon sets fontawesome and glyphicon. How do I use Iconpicker with my custom icon font?

http://victor-valencia.github.io/bootstrap-iconpicker/

Answer 1

If you take a look at the icon picker's source control, you'll notice that the glyph-icon and font awesome classes are hard coded within the javascript file and there doesn't appear to be a way to put in your own icon set.

I had this challenge a few days ago, and I solved it by using select2 and using it to populate an icon set.

See fiddle: http://jsfiddle.net/m9yLa/2/

HTML:

<select id="icon">
    <option value="img1">Img 1</option>
    <option value="img2">Img 2</option>
</select>

Javascript:

var formatResult = function (state) {
    if (state.id === "profile") return "<img src='img.png' width=48 />";
    else return "<img src='img2.png' width=48 />";
};
$('#icon').select2({
    formatResult: formatResult,
    formatSelection: formatResult,
    minimumResultsForSearch: -1,
    width: 90
});

CSS:

.select2-choice {
    height:60px !important;
    width:90px
}

Answer 2

if you are still looking for a customizable Icon Picker, I've released one many days ago called Font Awesome Icon Picker http://mjolnic.github.io/fontawesome-iconpicker/

With this plugin you can use your own custom font and class prefixes (there is a sample in the page).

I've written also a Chrome extension, but it only works with Font Awesome icon pack.

I hope it is useful for you