在DropDownList的项目字体真棒图标 [英] Font Awesome Icons in DropDownList Items

问题描述

我想用的字体真棒图标，图标的名称的选择框。
我建立我ListItems的为code DropDownList的背后动态，并希望以示与UNI code中的图标。
这里是我的输出：

将DropDownList的decleration看起来是这样的：

 ＆LT; ASP：DropDownList的ID =ddl_Icons的CssClass =的形式控制SELECT2 fontawesomeselect=服务器＆GT;＆LT; / ASP：DropDownList的＆GT;
 

字体家庭应该是正确的，但仍然没有显示图标。
任何提示我怎么能显示图标？

我使用SELECT2并取得了包含以下code两个CSS类：

 ＆LT;风格类型=文/ CSS＆GT;
    .fontawesomeselect {
        FONT-FAMILY：'FontAwesome'，'宋体';
    }    .select2-selection__rendered {
        FONT-FAMILY：'FontAwesome'，'宋体';
    }
＆LT; /风格＆GT;
 

解决方案

我做的真棒的引导Iconpicker 插件。
只需添加一个按钮（从右边酥料饼）到你的页面：

 ＆LT;按钮ID =btn_iconchoser级=BTN BTN-默认的数据图标集=fontawesome数据图标=glyphicon右箭头数据搜索 - 文字=选择图标数据放置=正确的角色=iconpicker＆GT;＆LT; /按钮＆GT;
 

导入以下文件：

标题：

 ＆LT;！ - 引导Iconpicker  - ＆GT;
＆LT;链接rel =stylesheet属性href=\"/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css\"/>
 

页脚：

 ＆LT;！ - 引导 -  Iconpicker图标集的字体真棒 - ＆GT;
＆LT;脚本类型=文/ JavaScript的 src=\"/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.2.0.min.js\"></script>
＆所述;！ - 引导-Iconpicker  - ＆GT;
＆LT;脚本类型=文/ JavaScript的 src=\"/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js\"></script>
 

在我来说，我使用的字体真棒图标集（V4.2），但你也可以使用下面的图标集之一：

• glyphicon


• ionicon


• fontawesome


• weathericon


• mapicon


• octicon


• typicon


• elusiveicon

也许这有助于类似的问题有人。

I want a select box with the font awesome icon and the name of the icon. I build my ListItems for the DropDownList in Code behind dynamically and want to show the icon with the unicode. Here is my output:

The decleration of the DropDownList looks like this:

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

The font-family should be correct but there is still no icon displayed. Any tips how I can display the icons?

I'm using select2 and have made two CSS classes containing the following code:

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

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

解决方案

I did a workaround with the awesome Bootstrap Iconpicker plugin. Simply add an button (with popover from the right side) to your page:

<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>

Import the following files:

Header:

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

Footer:

<!-- 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>

In my case I'm using the font awesome iconset (v4.2) but you can also use one of the following iconsets:

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

Maybe this helps somebody with a similar problem.

这篇关于在DropDownList的项目字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！