使用带有图标的 Bootstrap-select答案

【问题标题】：Using Bootstrap-select with icons使用带有图标的 Bootstrap-select
【发布时间】：2018-07-17 02:44:02
【问题描述】：

我想创建一个图标下拉框，我可以在其中显示图标及其名称，然后能够使用 Bootstrap select 搜索它们。

在我目前的状态下，我已经解决了这两个问题，但是当启用 Bootstrap-select 时，图标停止显示。

<div class="col-sm-7">
     <div class="select">
           <select class="selectpicker" id="iconpicker" data-live-search="true" style="font-family: premium-solid-icons">
           <option value="none" selected="" disabled="disabled">Ingen</option>
           <option value='psi-3d-glasses'>&#xe900; 3d Glasses</option>
           <option value='psi-3d-glasses2'>&#xe901; 3d Glasses2</option>
           </select>
     </div>
</div>

我一无所知，但似乎 Bootstrap-select 覆盖了选择下拉框的样式。

我该如何解决这个问题？

【问题讨论】：

嗨 rasmus，有一个新的引导选择！ github.com/mikeGHQ/IBootstrap#select

标签： html css twitter-bootstrap drop-down-menu icons

【解决方案1】：

我是对的，高级实体图标已被 Bootstrap Select 覆盖，因此我必须将该字体系列设置包含到 Bootstrap-Select.css 文件中。

.bootstrap-select {
width: 220px \0; /*IE9 and below*/
font-family: premium-solid-icons;
(etc.)

感谢您抽出宝贵的时间阅读，我希望这对以后的其他人有所帮助。

【讨论】：

【解决方案2】：

考虑使用 React Virtualized Select

中的 Custom Option Renderer

从这里获取： https://github.com/bvaughn/react-virtualized-select/

演示：https://bvaughn.github.io/react-virtualized-select/

【讨论】：