Question

我想创建一个图标下拉框，我可以在其中显示图标，名称，然后可以使用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会覆盖选择保管箱的样式。

我该如何解决这个问题？

Answer 1

我是对的，Bootstraps Select正在覆盖premium-solid-icons，因此我必须将该font-family设置包含在Bootstrap-Select.css文件中。

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

感谢您抽出宝贵时间阅读，希望将来能帮助其他人。

Answer 2

考虑使用 React Virtualized Select

中的自定义选项呈现器

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

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

使用Bootstrap-select with icons

2 个答案: