IcoMoon icons in parameter select list field

[ljk]

Hi,

I am developing a Joomla 3 module and in the parameter options I would like the user to be able to select a IcoMoon icon to use with a text file. I would like a list of all the icons Joomla supports in the select list and it to display the icon as well as the text name of the icon. Is there any way to automatically do this without having to manual make an option for each icon, something like the filelist parameter type?

I tried using the following code to manually make the select list:
[code]
                <field name="icoicon1" type="list" default="0" label="Select an icon" description="">
                    <option value="0">None Selected</option>
                    <option value="icon-home"><i class="icon-home"></i> icon-home</option>
                    <option value="icon-user"><i class="icon-user"></i> icon-user</option>
                </field>
[/code]

This produced a select list, but the icon didn't display in the list, only the icon name.

Any ideas would be greatly appreciated.

Thank you.

[Bakual]

The problem is that regular options don't support HTML in it. So the <i> tag will just be ignored by the browser and thus also the CSS fails.

To get this working you will have to create your own select using javascript. Kind of like the chosen select does.

[Gary Mort]

I'm doing something similar with editor-xtd plugin buttons.

For my use case, add the class to the option works, ie:

                <field name="icoicon1" type="iconlist" default="0" label="Select an icon" description="">

                    <option value="0">None Selected</option>

                    <option value="icon-home" class="icon-home chosen-icon" > icon-home</option>
                    <option value="icon-user" class="icon-home chosen-icon">icon-user</option>
                </field>


For this to work, I had to create my own field type, iconlist, which extends the JFormFieldList class.  I copied the getInput method and changed the JHtml::_ calls for select.genericlist to selectclass.genericlist

By the same token, I created my own JHtml class, JHtmlSelectclass which extends JHtmlSelect

The bit of code which fixes everything is to copy the options method from JHtmlSelect and to check to see if the class property is set for an option, if it is set then I add the styling text to the $extra variable so it is added to the option.  

Because icon-* classed items are given a fixed width, I also had to apply a second class for each option, the chosen-icon class and use addStyleDeclaration to change the width on all li.chosen-icon fields to 100%.

One small oddity, I also had to copy the genericlist method - even though I am making no changes to it - because when it calls self::options() the code executed is the code from the file where genericlist is defined - ie if it calls the method from the parent definition, then options is called in that file without my custom code.

Otherwise, it works nicely with the chosen dropdown function.

[pepperstreet]

Hello, just followed this topic and discussion. Recently i came across the following GitHub projects. Not specific for Joomla, but maybe of interest for all of you:

BS3 GLYPHICONS - Bootstrap Icon Picker

by titosust

BS3 FONTAWESOME4 - Bootstrap Icon Picker

by victor-valencia

BS2 FONTAWESOME3 - Simple Icon Chooser

by scripting (build for Fargo, but there is a demo link)