DropDownList项目中的字体真棒图标

Question

我想要一个带有字体真棒图标和图标名称的选择框。 我动态地为Code中的DropDownList构建ListItems，并希望显示带有unicode的图标。 这是我的输出：

DropDownList的删除如下所示：

 <asp:DropDownList ID="ddl_Icons" CssClass="form-control select2 fontawesomeselect" runat="server"></asp:DropDownList>

font-family应该是正确的，但仍然没有显示图标。 如何显示图标的任何提示？

我正在使用select2并制作了两个包含以下代码的CSS类：

<style type="text/css">
    .fontawesomeselect {
        font-family: 'FontAwesome', 'Arial';
    }

    .select2-selection__rendered{
        font-family: 'FontAwesome', 'Arial';
    }
</style>

Answer 1

我使用了很棒的Bootstrap Iconpicker插件做了一个解决方法。 只需在页面上添加一个按钮（右侧有弹出窗口）：

<button id="btn_iconchoser" class="btn btn-default"data-iconset="fontawesome" data-icon="glyphicon-arrow-right" data-search-text="Choose Icon" data-placement="right" role="iconpicker"></button>

导入以下文件：

标题：

<!-- Bootstrap Iconpicker -->
<link rel="stylesheet" href="/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

页脚：

<!-- Bootstrap-Iconpicker Iconset for Font Awesome -->
<script type="text/javascript" src="/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.2.0.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

在我的情况下，我使用字体awesome iconset（v4.2），但您也可以使用以下iconset之一：

• glyphicon
• ionicon
• fontawesome
• weathericon
• mapicon
• octicon
• typicon
• elusiveicon

也许这可以帮助有类似问题的人。