Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Optgroup breaks special characters

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?

like image 777
santa Avatar asked May 04 '17 13:05

santa


2 Answers

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>
like image 144
Haskell McRavin Avatar answered Sep 29 '22 14:09

Haskell McRavin


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.

like image 32
Code4R7 Avatar answered Sep 29 '22 15:09

Code4R7