Optgroup breaks special characters

Question

I need to a add an icon from Fontawesome to an option of a selector. It works fine, unless I use optgroup

<select>
    <optgroup label="group name">
        <option>opt1 &#xf042;</option>
        <option>opt2 &#xf043;</option>
    </optgroup>
    <option>opt3 &#xf042;</option>
    <option>opt4 &#xf043;</option>
</select>

Here's JSfiddle.

Any ideas why?

For me it works in IE 11, Chrome 58. Breaks in FF 53. All on Windows 7. — santa, May 04 '17 at 15:27
My IE11/Windows 10 doesn't work ... I guess the form elements _again_ has difficulties to adapt to more modern techniques :) — Asons, May 04 '17 at 15:31

score 3 · Answer 1 · answered May 15 '17 at 21:48

I updated your fiddle to use external resources.

It imports a javascript file and a css file, and the icons show now.

If you make an account on FontAwesome they will send you a link. Try the below in your code and see if it works, I'm betting it will.

<link rel="stylesheet" type="text/css" href="https://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<script type="text/javascript" src="https://use.fontawesome.com/cec949909c.js"></script>

score 1 · Answer 2 · edited May 23 '17 at 11:47

1

Fiddle doesn't work on Windows 8.1 (latest FF + IE11), looks like there is something with the select from the OS. Even without optgroup it still does not work, so optgroupt has nothing to do with it.

Looks like this answer is still valid. Workaround: use jQuery plugins instead.

edited May 23 '17 at 11:47

Community

1
1

answered May 16 '17 at 13:39

Code4R7

2,600
1
19
42

Optgroup breaks special characters

2 Answers2