0

I'd like to create a visually appealing select-dialog that shows FontAwesome-Icons and a word describing the symbol to select from various scales for statistical data.

So I'm using the FontAwesome-Fonts for the select-tag and the unicode-glyphs for the various symbols. That first part works nicely. But the words I am using are also used in FonAwesome to form ligatures that can also be used to get the icons (I thought this was limited to the desktop-version, but as my example prooves, it also happens on the web). The FA-Site states that they are "...aren't comfortable considering ligatures for Web Fonts + CSS".

Please check out my fiddle here or the screenshot:

enter image description here

So, my questions are:

  • if it's not supposed to happen with Webfonts/CSS - is there anything that I am doing wrong using them? (Of course I have the desktop-fonts installed on my machine, I guess we won't know if users of the website will have them or not)

  • is there any way I can avoid the ligatures taking effect within the option-tag? (as you see in the sample, I am already using font-variant-ligatures: none; in the CSS)

MBaas
  • 7,248
  • 6
  • 44
  • 61
  • Your fiddle doesn't actually demonstrate much; it doesn't even have the FA icons. Can you tell us which words in the example produce ligatures? – Mr Lister Aug 05 '19 at 07:12
  • I added a screenshot of the fiddle (takesn with the latest Chrome). Interesting though that it doesn't show the icons for you. (I know it doesn't work on IOS, but everywhere else if should) – MBaas Aug 05 '19 at 07:40

1 Answers1

0

I found a way to solve this by defining dedicated @font-faces with a different name. (My theory is that Chrome uses the local font I have installed and that it's ligatures override everything I do in CSS). That "special font-face" is sure not to be found locally...

If someone finds a better explanation or fix, I'll happily accept it.

MBaas
  • 7,248
  • 6
  • 44
  • 61