Font Awesome Icons in DropDownList Items

Question

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>

Answer 1

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.