在DropDownList的项目字体真棒图标 [英] Font Awesome Icons in DropDownList Items
问题描述
我想用的字体真棒图标,图标的名称的选择框。
我建立我ListItems的为code DropDownList的背后动态,并希望以示与UNI code中的图标。
这里是我的输出:
将DropDownList的decleration看起来是这样的:
< ASP:DropDownList的ID =ddl_Icons的CssClass =的形式控制SELECT2 fontawesomeselect=服务器>< / ASP:DropDownList的>
字体家庭应该是正确的,但仍然没有显示图标。
任何提示我怎么能显示图标?
我使用SELECT2并取得了包含以下code两个CSS类:
<风格类型=文/ CSS>
.fontawesomeselect {
FONT-FAMILY:'FontAwesome','宋体';
} .select2-selection__rendered {
FONT-FAMILY:'FontAwesome','宋体';
}
< /风格>
我做的真棒的引导Iconpicker 插件。
只需添加一个按钮(从右边酥料饼)到你的页面:
<按钮ID =btn_iconchoser级=BTN BTN-默认的数据图标集=fontawesome数据图标=glyphicon右箭头数据搜索 - 文字=选择图标数据放置=正确的角色=iconpicker>< /按钮>
导入以下文件:
标题:
<! - 引导Iconpicker - >
<链接rel =stylesheet属性href=\"/plugins/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css\"/>
页脚:
<! - 引导 - Iconpicker图标集的字体真棒 - >
&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屋!