DropDownList 项目中的字体真棒图标答案

【问题标题】：Font Awesome Icons in DropDownList ItemsDropDownList 项目中的字体真棒图标
【发布时间】：2015-10-26 22:01:01
【问题描述】：

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

DropDownList 的声明如下所示：

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

字体系列应该是正确的，但仍然没有显示图标。有什么提示可以显示图标吗？

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

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

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

【问题讨论】：

标签： c# css asp.net unicode

【解决方案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>

在我的例子中，我使用的是字体真棒图标集（v4.2），但您也可以使用以下图标集之一：

字形图标
离子图标
字体真棒
天气图标
地图图标
奥克康
典型
难以捉摸的图标

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

【讨论】：