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

there is a way to have those glyphs in at least chrome, IE and Edge - Firefox is the lone standout unfortuantely - you'd be better off **not** using ` — Jaromanda X, Jul 03 '17 at 04:27
but still, how can i do it? it must be a way to do it because i remember i seen something like it on the internet — Ayhem, Jul 03 '17 at 04:27
the internet is a big place :p if you're not averse to using jquery, there is the jquery "select2" library, but I've said too much :p — Jaromanda X, Jul 03 '17 at 04:28
Possible duplicate of [How to show font awesome icon in symfony form select](https://stackoverflow.com/questions/39388431/how-to-show-font-awesome-icon-in-symfony-form-select) — Amaan Iqbal, Jul 03 '17 at 08:33
Answered a similar question here: https://stackoverflow.com/questions/31739133/list-all-font-awesome-icons-in-selectbox/71292342#71292342 Hope it helps :) — James Heffer, Feb 28 '22 at 09:43

samAlvin · Accepted Answer · 2017-07-03T05:08:03.300

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.

now the icons appear but they are small and black. I want something like this but with fontawesome icons : https://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 — Ayhem, Jul 03 '17 at 04:54

score -1 · Answer 2 · answered Jul 03 '17 at 04:42

i {
  color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i></a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i></a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i></a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i></a></li>
</ul>

Font Awesome icons dropdown

2 Answers2

Related