1345793 - Fontawesome does not work in select options

Status: NEW

(Core :: Graphics: Text, defect, P3)

Description

[Sean]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170302120751

Steps to reproduce:

Using FontAwesome in a select option. Clicking the dropdown to show the options.

https://jsfiddle.net/g9d3e4vc/


Actual results:

FontAwesome icon is not displayed in the options. It seems the font is not recognised. (See the jsfiddle)


Expected results:

FontAwesome icon should be displayed. Works in all other browsers. Also works in firefox ESR.

Comment 1

[YF (Yang)]

I don't see the problem in 48.0.1, 45.8.0esr, 52.0 and 53.0b1 on Win10.

Can you provide a screenshot to illustrate this problem?

Comment 2

[Sean]

Attachment: Image of problem

Comment 3

[Sean]

I have added an image of the problem. Experienced on Win10 with v52.0 of Firefox.

Comment 4

[YF (Yang)]

Any errors in Web Console?

Comment 5

[Sean]

Attachment: Console log

Comment 6

[Sean]

Good question. Have added the console log.

Comment 7

[Jonathan Kew [:jfkthame]]

I can reproduce this in current Nightly, provided e10s is enabled (without e10s, it doesn't occur). My guess is that the webfont that was loaded by the content process isn't being sent over to the chrome process (which presents the <select> dropdown) successfully.

Comment 8

[messmail]

I have the same issue since I updated to FF57, I did not have the issue in previous FF versions.
The drop down does not show the icons and the FF inspector > Fonts, shows "not fonts were found for the current element".
(I use a SELECT like this in a CMS to allow a user to select a FontAwsome icon).

Fiddle: https://jsfiddle.net/7ur24of5/2/

Comment 9

[messmail]

BTW no errors in the console

Comment 10

[Fletcher Johnston]

This issue still exists in FF 90.0.2.

Still not seeing errors in the console, and the font is actually showing up under the Fonts tab in dev tools. WebFonts work just fine elsewhere on the page and inside other DOM elements/tags. Perhaps WebFonts are not being loaded properly into the popups associated with option tags?

Original js fiddle still reproduces this issue.

Relevant:
https://github.com/FortAwesome/Font-Awesome/issues/996

https://bugs.chromium.org/p/chromium/issues/detail?id=568116#c2

Comment 11

[Vlad]

FF 91.0.1

This Fiddle https://jsfiddle.net/14606fv9/2/ describes the annoying bug related to not displaying FontAwesome characters in the options list of the HTML <select> tag. Just remove "multiple" from the tag <select multiple> and you'll see square placeholders instead of actual symbols in the dropdown list of options! Definitely, it's not something complex - it's just a bug.

If it helps, the symbols with codes like $#x2700; (scissors) are displayed correctly, but FontAwesome's symbols with codes like &#xf037 ; (align-center) are not displayed in the list of options, but are displayed correctly as a chosen option.

Please, correct it ASAP!!!!!

Comment 12

[Koen Cornelis]

Same problem here. Quite annoying really. On the same level as no span/divs allowed within an option.

Comment 13

[codewithemad]

It's so annoying. it's not resolved yet.

Comment 14

[mahan.abbuspour]

I had to change design to this problem. Works fine on every other browser. Hope it gets fixed soon.