Font Awesome icons dropdown

Question

I am working on symfony project and I want to add dropdown to a form. The dropdown should contain only icons without any text. I tried using select option like this:

<select class="form-control" name="category">
    <option value="">
        <a class="category-icon icon-bed"></a>
    </option>
    <option value="">
        <i class="fa fa-wrench fa-fw"></i>
    </option>
    <option value="">
        <i class="fa fa-wrench fa-fw"></i>
    </option>
</select>

But it doesn't show any icon. How can i do that? Thanks

Solution

Have you tried this solution: https://stackoverflow.com/a/41508095/6638533

So basically, he put the "Arial" and "FontAwesome" as the font-family in the "select" tag's style, and then using the unicode instead of HTML markup in the "option" tag:

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
    <option value=''>&#xf039; &nbsp; All States</option>
    <option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
    <option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
    <option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

The list of the fontAwesome unicode can be found here.

----------------------------- UPDATE ------------------------

If you want this kind of solution: https://stackoverflow.com/a/20775713/6638533,

First you download the library from the site. Extract it, and copy the folder to your project. Then you import the library in your html file:

<link rel="stylesheet" type="text/css" href="{yourPath}/css/lib/control/iconselect.css" >
<script type="text/javascript" src="{yourPath}/lib/control/iconselect.js"></script>
<script type="text/javascript" src="{yourPath}/lib/iscroll.js"></script>

After that you put the mentioned script:

<script>

    var iconSelect;
    var selectedText;

    window.onload = function(){

        selectedText = document.getElementById('selected-text');

        document.getElementById('my-icon-select').addEventListener('changed', function(e){
           selectedText.value = iconSelect.getSelectedValue();
        });

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});
        icons.push({'iconFilePath':'images/icons/4.png', 'iconValue':'4'});
        icons.push({'iconFilePath':'images/icons/5.png', 'iconValue':'5'});
        icons.push({'iconFilePath':'images/icons/6.png', 'iconValue':'6'});
        icons.push({'iconFilePath':'images/icons/7.png', 'iconValue':'7'});
        icons.push({'iconFilePath':'images/icons/8.png', 'iconValue':'8'});
        icons.push({'iconFilePath':'images/icons/9.png', 'iconValue':'9'});
        icons.push({'iconFilePath':'images/icons/10.png', 'iconValue':'10'});
        icons.push({'iconFilePath':'images/icons/11.png', 'iconValue':'11'});
        icons.push({'iconFilePath':'images/icons/12.png', 'iconValue':'12'});
        icons.push({'iconFilePath':'images/icons/13.png', 'iconValue':'13'});
        icons.push({'iconFilePath':'images/icons/14.png', 'iconValue':'14'});

        iconSelect.refresh(icons);



    };

    </script>

You can then use it by adding 'selected-text' and 'my-icon-select' as the id of your html element:

<div id="my-icon-select"></div>

<input type="text" id="selected-text" name="selected-text" style="width:65px;">

P.S. The library includes four examples in the .zip file. You can run those and see the source code for better understanding.

Comments

[Ayhem]

now the icons appear but they are small and black. I want something like this but with fontawesome icons : stackoverflow.com/a/20775713/5823056 (i's an answer from the link you provide it). i undrestand the javascript code in this example but how can i use it and add it to my form. thanks