Bootstrap 3.0 的 Iconpicker - 使用自定义字体集答案

【问题标题】：Iconpicker for Bootstrap 3.0 - use custom font setBootstrap 3.0 的 Iconpicker - 使用自定义字体集
【发布时间】：2014-04-15 17:05:52
【问题描述】：

Bootstrap 3.0 的图标选择器仅使用默认图标集 fontawesome 和 glyphicon。如何将 Iconpicker 与我的自定义图标字体一起使用？

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

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 icons

【解决方案1】：

如果你还在寻找一个可定制的图标选择器，我已经在很多天前发布了一个叫做 Font Awesome Icon Picker http://mjolnic.github.io/fontawesome-iconpicker/

通过这个插件，您可以使用自己的自定义字体和类前缀（页面中有示例）。

我还编写了一个 Chrome 扩展程序，但它只适用于 Font Awesome 图标包。

希望对你有用

【讨论】：

【解决方案2】：

如果您查看图标选择器的源代码控制，您会注意到 glyph-icon 和 font awesome 类在 javascript 文件中进行了硬编码，并且似乎没有办法放入您自己的图标集。

几天前我遇到了这个挑战，我通过使用 select2 并使用它来填充图标集来解决它。

见小提琴：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
}

【讨论】：