Question

31

Font Awesome icons dropdown

rated 0 times [ 38] [ 7] / answers: 1 / hits: 16980 / 7 Years ago, mon, july 3, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zoiel

Add To Favorites

Follow

Total Points: 692

Total Questions: 90

Total Answers: 89

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

answered 7 Years ago jarettajb · Accepted Answer

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.